/**
 * Sparkles Tooltip Component Styles
 * Accessible tooltips with smart positioning
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== TOOLTIP BASE ========== */
.sparkles-tooltip {
    position: absolute;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.25;
    border-radius: .375rem;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    max-width: 24rem;
    container-type: inline-size;
    z-index: var(--z-tooltip);
    transition: all .2s ease-out;
    overflow-wrap: break-word;
}

.sparkles-tooltip-show {
    opacity: 1;
    visibility: visible;
}

/* ========== TOOLTIP CONTENT ========== */
.sparkles-tooltip-content {
    position: relative;
    z-index: var(--z-dropdown);
}

/* ========== TOOLTIP THEMES ========== */
.sparkles-tooltip-dark {
    --tw-bg-opacity: 1;
    background-color: rgba(17,24,39,var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

.sparkles-tooltip-light {
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    color: var(--gray-900);
    border-width: 1px;
    border-color: var(--gray-200);
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

.sparkles-tooltip-primary,
.sparkles-btn-outline:hover {
    background-color: var(--color-primary);
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

/* ========== TOOLTIP ARROWS ========== */
.sparkles-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Dark theme arrows */
.sparkles-tooltip-dark .sparkles-tooltip-arrow-top,
.sparkles-tooltip-light .sparkles-tooltip-arrow-top {
    --tw-border-opacity: 1;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 6px;
}

.sparkles-tooltip-dark .sparkles-tooltip-arrow-top {
    border-color: rgba(17,24,39,var(--tw-border-opacity,1));
}

.sparkles-tooltip-dark .sparkles-tooltip-arrow-bottom,
.sparkles-tooltip-light .sparkles-tooltip-arrow-bottom {
    --tw-border-opacity: 1;
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 6px;
}

.sparkles-tooltip-dark .sparkles-tooltip-arrow-bottom {
    border-color: rgba(17,24,39,var(--tw-border-opacity,1));
}

.sparkles-tooltip-dark .sparkles-tooltip-arrow-left,
.sparkles-tooltip-light .sparkles-tooltip-arrow-left {
    --tw-border-opacity: 1;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 6px;
    border-top-color: #0000;
}

.sparkles-tooltip-dark .sparkles-tooltip-arrow-left {
    border-color: rgba(17,24,39,var(--tw-border-opacity,1));
}

.sparkles-tooltip-dark .sparkles-tooltip-arrow-right,
.sparkles-tooltip-light .sparkles-tooltip-arrow-right {
    --tw-border-opacity: 1;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-right-width: 6px;
    border-top-color: #0000;
}

.sparkles-tooltip-dark .sparkles-tooltip-arrow-right {
    border-color: rgba(17,24,39,var(--tw-border-opacity,1));
}

/* Light theme arrows */
.sparkles-tooltip-light .sparkles-tooltip-arrow-top {
    border-color: rgba(255,255,255,var(--tw-border-opacity,1));
}

.sparkles-tooltip-light .sparkles-tooltip-arrow-top::after {
    top: -7px;
    left: -6px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 6px;
    content: '';
    position: absolute;
    border-color: var(--gray-200);
}

.sparkles-tooltip-light .sparkles-tooltip-arrow-bottom {
    border-color: rgba(255,255,255,var(--tw-border-opacity,1));
}

.sparkles-tooltip-light .sparkles-tooltip-arrow-bottom::after {
    bottom: -7px;
    left: -6px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 6px;
    content: '';
    position: absolute;
    border-color: var(--gray-200);
}

.sparkles-tooltip-light .sparkles-tooltip-arrow-left {
    border-color: rgba(255,255,255,var(--tw-border-opacity,1));
}

.sparkles-tooltip-light .sparkles-tooltip-arrow-left::after {
    left: -7px;
    top: -6px;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 6px;
    content: '';
    position: absolute;
    border-color: var(--gray-200);
    border-top-color: #0000;
}

.sparkles-tooltip-light .sparkles-tooltip-arrow-right {
    border-color: rgba(255,255,255,var(--tw-border-opacity,1));
}

.sparkles-tooltip-light .sparkles-tooltip-arrow-right::after {
    right: -7px;
    top: -6px;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-right-width: 6px;
    content: '';
    position: absolute;
    border-color: var(--gray-200);
    border-top-color: #0000;
}

/* Primary theme arrows */
.sparkles-tooltip-primary .sparkles-tooltip-arrow-top {
    border-color: var(--color-primary);
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 6px;
}

.sparkles-tooltip-primary .sparkles-tooltip-arrow-bottom {
    border-color: var(--color-primary);
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 6px;
}

.sparkles-tooltip-primary .sparkles-tooltip-arrow-left {
    border-color: var(--color-primary);
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 6px;
    border-top-color: #0000;
}

.sparkles-tooltip-primary .sparkles-tooltip-arrow-right {
    border-color: var(--color-primary);
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-right-width: 6px;
    border-top-color: #0000;
}

/* ========== ANIMATIONS ========== */
.sparkles-tooltip-fade {
    transition: opacity 200ms ease-out, visibility 200ms ease-out; /* Keep raw for specific timing */
}

.sparkles-tooltip-slide,
.sparkles-rating-interactive .sparkles-star,
.sparkles-toggle-track,
.sparkles-toggle-thumb,
.sparkles-progress-bar {
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.sparkles-tooltip-slide-top {
    --tw-translate-y: 0.5rem;
}

.sparkles-tooltip-slide-bottom {
    --tw-translate-y: -0.5rem;
}

.sparkles-tooltip-show.sparkles-tooltip-slide-top,
.sparkles-tooltip-show.sparkles-tooltip-slide-bottom,
.sparkles-tooltip-show.sparkles-tooltip-slide-left,
.sparkles-tooltip-show.sparkles-tooltip-slide-right {
    --tw-translate-x: 0px;
    --tw-translate-y: 0px;
}

/* ========== TOOLTIP SIZES ========== */
.sparkles-tooltip-sm,
.sparkles-action-button.xs {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .75rem;
    line-height: 1rem;
}

.sparkles-tooltip-sm {
    max-width: 200px;
}

.sparkles-tooltip-lg {
    max-width: 400px;
}

/* ========== INTERACTIVE TOOLTIPS ========== */
.sparkles-tooltip-interactive {
    pointer-events: auto;
    cursor: pointer;
}

.sparkles-tooltip-interactive:hover {
    transform: scale(1.02);
}

/* ========== RICH CONTENT TOOLTIPS ========== */
.sparkles-tooltip-rich {
    max-width: 320px;
    padding: 1rem;
}

.sparkles-tooltip-rich .sparkles-tooltip-title {
    font-weight: 600;
    margin-bottom: .5rem;
    font-size: 1rem;
    line-height: 1.5rem;
}

.sparkles-tooltip-rich .sparkles-tooltip-body {
    font-size: .875rem;
    line-height: 1.25rem;
    line-height: 1.625;
}

.sparkles-tooltip-rich .sparkles-tooltip-actions {
    margin-top: .75rem;
    display: flex;
    gap: .5rem;
}

.sparkles-tooltip-rich .sparkles-tooltip-btn {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-radius: .125rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    transition-property: all;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.sparkles-tooltip-dark .sparkles-tooltip-btn {
    background: rgba(255, 255, 255, 0.1); /* Keep raw for rgba value */ --tw-text-opacity: 1; color: rgba(255,255,255,var(--tw-text-opacity,1));
}

.sparkles-tooltip-dark .sparkles-tooltip-btn:hover {
    background: rgba(255, 255, 255, 0.2); /* Keep raw for rgba value */
}

.sparkles-tooltip-light .sparkles-tooltip-btn {
    background-color: var(--gray-100);
    color: var(--gray-700);
}

.sparkles-tooltip-light .sparkles-tooltip-btn:hover {
    background-color: var(--gray-200);
}

/* ========== TOOLTIP VARIANTS ========== */
.sparkles-tooltip-error,
.sparkles-control-button.danger,
.sparkles-action-button.danger,
.sparkles-tooltip-success,
.sparkles-tooltip-warning,
.sparkles-action-button.warning,
.sparkles-control-button.primary,
.sparkles-social-login-btn-apple,
.sparkles-action-button.primary,
.sparkles-action-button.success {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
}

/* Error tooltip */
.sparkles-tooltip-error,
.sparkles-control-button.danger,
.sparkles-action-button.danger {
    --tw-bg-opacity: 1;
    background-color: rgba(220,38,38,var(--tw-bg-opacity,1));
}

/* Success tooltip */
.sparkles-tooltip-success {
    --tw-bg-opacity: 1;
    background-color: var(--color-success);
}

/* Warning tooltip */
.sparkles-tooltip-warning,
.sparkles-action-button.warning {
    --tw-bg-opacity: 1;
    background-color: rgba(245,158,11,var(--tw-bg-opacity,1));
}

/* ========== SHARED SURFACE STATES (BUNDLE ORDERING) ========== */
.sparkles-nav-link:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(251 250 242 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.sparkles-qty-btn:hover:not(:disabled) {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.sparkles-control-button.primary {
    --tw-bg-opacity: 1;
    background-color: rgba(217,119,6,var(--tw-bg-opacity,1));
}


.sparkles-social-login-btn-apple {
    --tw-bg-opacity: 1;
    background-color: rgba(0,0,0,var(--tw-bg-opacity,1));
}

.sparkles-action-button.primary {
    --tw-bg-opacity: 1;
    background-color: rgba(37,99,235,var(--tw-bg-opacity,1));
}

.sparkles-action-button.success {
    --tw-bg-opacity: 1;
    background-color: rgba(5,150,105,var(--tw-bg-opacity,1));
}

.sparkles-rule-list .rule-item.rule-expired .rule-status-badge {
    --tw-bg-opacity: 1;
    background-color: rgba(255,237,213,var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgba(154,52,18,var(--tw-text-opacity,1));
}

/* NOTE: .sparkles-status-error and .sparkles-status-warning are defined in sparkles-status.css */

@layer components {
    .sparkles-btn-danger,
    .sparkles-btn-download {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    }

    .sparkles-btn-danger {
        --tw-bg-opacity: 1;
        background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
    }
    
    .sparkles-btn-download {
        --tw-bg-opacity: 1;
        background-color: rgb(251 250 242 / var(--tw-bg-opacity, 1));
    }
    
    .sparkles-btn-accent-light {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(75 85 99 / var(--tw-text-opacity, 1));
    }
}

/* ========== SPARKLES THEME ========== */
.sparkles-tooltip-sparkles {
    color: var(--color-secondary);
    border-color: var(--color-primary);
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-orange-light) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--color-orange-light)00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: var(--color-warning-light) var(--tw-gradient-to-position);
    border-width: 1px;
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
    font-family: var(--font-display);
}

.sparkles-tooltip-sparkles .sparkles-tooltip-arrow-top {
    border-top-color: var(--color-primary);
}

.sparkles-tooltip-sparkles .sparkles-tooltip-arrow-bottom {
    border-bottom-color: var(--color-primary);
}

.sparkles-tooltip-sparkles .sparkles-tooltip-arrow-left {
    border-left-color: var(--color-primary);
}

.sparkles-tooltip-sparkles .sparkles-tooltip-arrow-right {
    border-right-color: var(--color-primary);
}

/* ========== RESPONSIVE DESIGN ========== */
@container (max-width: 768px) {
    .sparkles-tooltip {
        max-width: 280px;
        font-size: .75rem;
        line-height: 1rem;
        padding: .5rem;
    }
    
    .sparkles-tooltip-rich {
        max-width: 300px;
        padding: .75rem;
    }
    
    .sparkles-tooltip-lg {
        max-width: 320px;
    }
}

/* ========== ACCESSIBILITY ========== */
/* TW v4.1 upgrade path: for new tooltip instances, prefer inline Tailwind motion variants
   (e.g. motion-reduce:transition-none) instead of this media query block. Keeps motion
   preferences co-located with component markup. This block remains valid for existing tooltips. */
@media (prefers-reduced-motion: reduce) {
    .sparkles-tooltip,
    .sparkles-tooltip-fade,
    .sparkles-tooltip-slide {
        transition-property: none;
    }
}

@media (prefers-contrast: high) {
    .sparkles-tooltip-light {
        border-width: 2px;
    }
    
    .sparkles-tooltip-dark {
        border-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgba(255,255,255,var(--tw-border-opacity,1));
    }
}

/* Hide tooltips when printing */
@media print {
    .sparkles-tooltip {
        display: none;
    }
}

/* ========== FOCUS MANAGEMENT ========== */
.sparkles-social-btn:focus,
.sparkles-social-login-btn:focus,
.sparkles-toggle:focus,
.sparkles-toggle:focus-visible,
.sparkles-media-nav-btn:focus,
.sparkles-media-action-btn:focus,
.sparkles-media-zoom-btn:focus,
.sparkles-media-play-btn:focus,
.sparkles-media-thumb:focus,
.sparkles-dropdown-trigger:focus-visible,
.sparkles-tab:focus-visible,
.sparkles-author-bio-toggle:focus,
.sparkles-author-profile *:focus-visible,
.sparkles-author-social-link:focus,
.sparkles-btn:focus,
.sparkles-btn:focus-visible,
.sparkles-banner-dot:focus,
.sparkles-banner-nav:focus,
.sparkles-accordion-header:focus,
.sparkles-accordion-header:focus-visible,
.sparkles-tooltip-trigger:focus,
.sparkles-tooltip-trigger:focus-visible {
    outline-color: var(--color-primary);
    outline-width: 2px;
    outline-offset: 2px;
}

.sparkles-tooltip-trigger:focus:not(:focus-visible) {
    outline: none;
}