/* Tour-specific customizations */
.introjs-skipbutton {
    color: #999;
    width: auto;
    font-size: 13px;
    padding: 2px 10px;
}

.introjs-tooltip-title {
    font-size: 18px;
    font-weight: 600;
}

/* Force tooltip to stay visible on narrow screens */
@media (max-width: 768px) {
    .introjs-tooltip {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-width: 90vw !important;
        width: 90vw !important;
        margin: 0 !important;
    }
    .introjs-tooltip:not(.introjs-top) {
        top: auto !important;
        bottom: 40% !important;
    }
    .introjs-tooltip.introjs-top {
        top: 20px !important;
        bottom: auto !important;
        transform: translate(-50%, 0) !important;
    }

    /* Desktop positioning fixes - prevent tooltip from covering highlighted element */
    .introjs-tooltip.introjs-top {
        margin-bottom: 15px !important;
    }

    .introjs-tooltip.introjs-bottom {
        margin-top: 15px !important;
    }

    .introjs-tooltip.introjs-left {
        margin-right: 15px !important;
    }

    .introjs-tooltip.introjs-right {
        margin-left: 15px !important;
    }

    .introjs-tooltip-title {
        font-size: 16px;
    }

    .introjs-tooltiptext {
        font-size: 14px;
        line-height: 1.4;
    }

    .introjs-button {
        font-size: 14px;
        padding: 8px 16px;
        /* min-height: 40px; */
    }

    .introjs-skipbutton {
        font-size: 12px;
        padding: 4px 8px;
    }

    .introjs-bullets ul li a {
        width: 8px;
        height: 8px;
    }

    .tour-highlight {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75) !important;
    }

    .introjs-helperLayer {
        border-radius: 8px;
    }

    .introjs-arrow {
        display: none;
    }
}