/**
 * Product Walkthrough Frontend Styles
 * 
 * Additional styles that aren't inline
 */

/* Ensure proper stacking context */
.product-walkthrough-widget {
    isolation: isolate;
}

/* Smooth transitions for all walkthrough elements */
.walkthrough-highlight,
.walkthrough-tooltip {
    will-change: transform, opacity;
}

/* Better performance on mobile */
@media (max-width: 768px) {
    .walkthrough-overlay {
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

/* Print styles - hide walkthrough elements */
@media print {
    .product-walkthrough-widget {
        display: none !important;
    }
}

/* Accessibility improvements */
.walkthrough-btn:focus,
.start-walkthrough-btn:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* RTL support */
.rtl .start-walkthrough-btn {
    flex-direction: row-reverse;
}

.rtl .walkthrough-buttons {
    flex-direction: row-reverse;
}

.rtl .step-indicator {
    flex-direction: row-reverse;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .walkthrough-highlight {
        border-width: 4px !important;
    }
    
    .walkthrough-tooltip {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .walkthrough-overlay,
    .walkthrough-highlight,
    .walkthrough-tooltip,
    .start-walkthrough-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* Dark mode support (optional - can be enabled via settings) */
@media (prefers-color-scheme: dark) {
    .product-walkthrough-widget[data-dark-mode="auto"] .walkthrough-tooltip {
        background-color: #2a2a2a;
        color: #ffffff;
    }
    
    .product-walkthrough-widget[data-dark-mode="auto"] .walkthrough-arrow {
        background-color: #2a2a2a;
    }
    
    .product-walkthrough-widget[data-dark-mode="auto"] .walkthrough-tooltip h3 {
        color: #ffffff;
    }
    
    .product-walkthrough-widget[data-dark-mode="auto"] .walkthrough-tooltip p {
        color: #cccccc;
    }
    
    .product-walkthrough-widget[data-dark-mode="auto"] .walkthrough-btn-skip,
    .product-walkthrough-widget[data-dark-mode="auto"] .walkthrough-btn-prev {
        background-color: #3a3a3a;
        color: #ffffff;
    }
}