/* ==========================================================================
   McAppTour — Interactive product tour overlay
   Spotlight + tooltip + arrow + smooth transitions
   All values from variables.css
   ========================================================================== */

@import url('variables.css');

/* ---------- Overlay container ---------- */
.mc-app-tour {
    position: fixed;
    inset: 0;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}

.mc-app-tour.active {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- SVG overlay with mask cutout ---------- */
.mc-tour-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

#mc-tour-cutout {
    transition: x 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                y 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                rx 0.3s ease;
}

/* ---------- Tooltip card ---------- */
.mc-tour-tooltip {
    position: fixed;
    z-index: 2;
    width: 340px;
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    padding: var(--space-5) var(--space-6) var(--space-5);
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: mc-tour-tooltip-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mc-tour-tooltip-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- Tooltip arrow ---------- */
.mc-tour-tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    transform: rotate(45deg);
    /* No z-index: -1 — animation creates stacking context that hides it */
}

/* Arrow positions */
.mc-tour-tooltip[data-position="bottom"] .mc-tour-tooltip-arrow,
.mc-tour-tooltip[data-position="bottom-end"] .mc-tour-tooltip-arrow {
    top: -7px;
    left: 32px;
    border-right: none;
    border-bottom: none;
}

.mc-tour-tooltip[data-position="bottom-end"] .mc-tour-tooltip-arrow {
    left: auto;
    right: 32px;
}

.mc-tour-tooltip[data-position="top"] .mc-tour-tooltip-arrow {
    bottom: -7px;
    left: 32px;
    border-left: none;
    border-top: none;
}

.mc-tour-tooltip[data-position="right"] .mc-tour-tooltip-arrow {
    left: -7px;
    top: 28px;
    border-right: none;
    border-top: none;
}

.mc-tour-tooltip[data-position="left"] .mc-tour-tooltip-arrow {
    right: -7px;
    top: 28px;
    border-left: none;
    border-bottom: none;
}

/* ---------- Tooltip header ---------- */
.mc-tour-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

/* Icon circle */
.mc-tour-tooltip-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mc-tour-tooltip-icon svg {
    width: 20px;
    height: 20px;
}

/* Icon color variants */
.mc-tour-tooltip-icon--teal {
    background: var(--color-teal-light);
    color: var(--color-teal);
}

.mc-tour-tooltip-icon--blue {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.mc-tour-tooltip-icon--green {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.mc-tour-tooltip-icon--purple {
    background: var(--chart-6-bg);
    color: #7B1FA2;
}

.mc-tour-tooltip-icon--orange {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* Counter badge */
.mc-tour-tooltip-counter {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    background: var(--color-hover-bg);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    letter-spacing: 0.04em;
}

/* ---------- Tooltip content ---------- */
.mc-tour-tooltip-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
}

.mc-tour-tooltip-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-5);
}

/* ---------- Actions footer ---------- */
.mc-tour-tooltip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: var(--space-px) solid var(--color-border);
}

.mc-tour-tooltip-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Buttons */
.mc-tour-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border: none;
    border-radius: var(--radius-input);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
    white-space: nowrap;
}

.mc-tour-btn:focus-visible {
    outline: var(--space-0-5) solid var(--color-teal);
    outline-offset: var(--space-0-5);
}

.mc-tour-btn--skip {
    background: transparent;
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-3);
}

.mc-tour-btn--skip:hover {
    color: var(--color-text);
    background: var(--color-hover-bg);
}

.mc-tour-btn--back {
    background: var(--color-hover-bg);
    color: var(--color-text-muted);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-full);
}

.mc-tour-btn--back:hover {
    background: var(--color-active-bg);
    color: var(--color-text);
}

.mc-tour-btn--next {
    background: var(--color-teal);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    height: 34px;
}

.mc-tour-btn--next:hover {
    background: var(--color-teal-hover);
}

.mc-tour-btn--next svg {
    flex-shrink: 0;
}

/* ---------- Spotlight pulse ring ---------- */
.mc-app-tour.active .mc-tour-overlay::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 767px) {
    .mc-tour-tooltip {
        width: calc(100vw - var(--space-8));
        max-width: 340px;
        left: var(--space-4) !important;
        right: var(--space-4);
    }

    /* On mobile, always position tooltip at bottom of viewport */
    .mc-tour-tooltip[data-position="right"] {
        left: var(--space-4) !important;
    }

    .mc-tour-tooltip-arrow {
        display: none;
    }
}

/* ---------- Responsive: tablet ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .mc-tour-tooltip {
        width: 310px;
    }
}

/* ---------- Dark mode adjustments ---------- */
html[data-theme="dark"] .mc-tour-tooltip-icon--purple {
    background: rgba(195, 177, 225, 0.2);
    color: #CE93D8;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mc-tour-tooltip,
    #mc-tour-cutout {
        transition: none;
        animation: none;
    }
}