/**
 * Steavy Carter Open House Tutorial
 * Stable named-step controller styles
 * Version: 1.2.0
 * Built: 2026-07-24
 */

.sc-oh-tutorial-root[hidden] {
    display: none !important;
}

.sc-oh-tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999999;
    background: rgba(0, 10, 25, 0.68);
    pointer-events: none;
}


/* Page and map remain locked during guided action steps.
   Stage 9 temporarily restores page scrolling through the controller. */
html body.sc-oh-tutorial-page-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
}

/* Independent focal-area spotlight. The blue pulse remains a separate layer. */


.sc-oh-tutorial-root

.sc-oh-tutorial-tooltip {
    position: fixed;
    z-index: 99999999;
    top: 50%;
    left: 50%;
    width: min(90vw, 380px);
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 24px 22px 20px;
    overflow: visible;
    color: #e5f0f4;
    background: linear-gradient(165deg, #030c1d 0%, #00142e 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85);
    font-family: inherit;
    pointer-events: auto;
}

.sc-oh-tutorial-tooltip[hidden] {
    display: none !important;
}

.sc-oh-tutorial-skip {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 2;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 6px;
    color: rgba(229, 240, 244, 0.55);
    background: transparent;
    border: 0;
    box-shadow: none;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.sc-oh-tutorial-skip:hover,
.sc-oh-tutorial-skip:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.sc-oh-tutorial-badge {
    display: block;
    margin: 0 0 4px;
    color: #007aff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sc-oh-tutorial-title {
    margin: 0 0 6px;
    padding-right: 75px;
    color: #e5f0f4;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.sc-oh-tutorial-body {
    margin: 0;
    color: #d0dfe5;
    font-size: 13px;
    line-height: 1.45;
}

.sc-oh-tutorial-body p {
    margin: 0 0 14px;
}

.sc-oh-tutorial-body p:last-child {
    margin-bottom: 0;
}

.sc-oh-tutorial-small {
    font-size: 12px;
    opacity: 0.82;
}

.sc-oh-tutorial-actions {
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
}

.sc-oh-tutorial-actions[hidden],
.sc-oh-tutorial-primary[hidden] {
    display: none !important;
}

.sc-oh-tutorial-primary {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 20px;
    color: #fff;
    background: #007aff;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4);
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.sc-oh-tutorial-primary:hover,
.sc-oh-tutorial-primary:focus-visible {
    background: #1485ff;
}

.sc-oh-tutorial-icon-list {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-oh-tutorial-icon-list li {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 7px;
}

.sc-oh-tutorial-icon-list i {
    width: 20px;
    color: #007aff;
    text-align: center;
}

/* Named step placement. No shared step can override another step. */
body[data-sc-tutorial-step="welcome"] .sc-oh-tutorial-tooltip {
    top: 50%;
    transform: translate(-50%, -50%);
}

body[data-sc-tutorial-step="filter-button"] .sc-oh-tutorial-tooltip {
    top: 55%;
    transform: translate(-50%, -50%);
}

body[data-sc-tutorial-step="filter-beds"] .sc-oh-tutorial-tooltip {
    top: 44%;
    transform: translate(-50%, 44%);
}

body[data-sc-tutorial-step="map-pins"] .sc-oh-tutorial-tooltip {
    top: 61%;
    transform: translate(-50%, -50%);
}

body[data-sc-tutorial-step="added-actions"] .sc-oh-tutorial-tooltip {
    top: 32%;
    transform: translate(-50%, 54%);
}

body[data-sc-tutorial-step="add-to-tour"] .sc-oh-tutorial-tooltip {
    top: 38%;
    transform: translate(-50%, 54%);
}

body[data-sc-tutorial-step="congrats-8"] .sc-oh-tutorial-tooltip {
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

body[data-sc-tutorial-step="congrats-8"] .sc-oh-tutorial-title {
    padding-right: 0;
}

body[data-sc-tutorial-step="your-tour-list"] .sc-oh-tutorial-tooltip {
    top: 35%;
    transform: translate(-50%, -50%);
}

/* Detached cue: never changes the position, ID, class, or style of app targets. */
.sc-oh-tutorial-cue {
    --sc-cue-blue: #007aff;
    position: fixed;
    z-index: 1000001;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.sc-oh-tutorial-cue-steady,
.sc-oh-tutorial-cue-pulse {
    position: absolute;
    box-sizing: border-box;
    border-radius: inherit;
    pointer-events: none;
}

.sc-oh-tutorial-cue-steady {
    inset: 0;
    border: 4px solid var(--sc-cue-blue);
    box-shadow:
        0 0 12px rgba(0, 122, 255, 1),
        0 0 24px rgba(0, 122, 255, 0.7);
}

.sc-oh-tutorial-cue-pulse {
    inset: -4px;
    border: 4px solid rgba(0, 122, 255, 0.95);
    opacity: 0;
    animation: scOhTutorialRadiate30 1.45s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}

.sc-oh-tutorial-cue-pulse-two {
    animation-delay: 0.45s;
}

@keyframes scOhTutorialRadiate30 {
    0% {
        inset: -4px;
        opacity: 1;
        border-color: rgba(0, 122, 255, 1);
        box-shadow:
            0 0 12px rgba(0, 122, 255, 1),
            0 0 24px rgba(0, 122, 255, 0.85);
    }

    75% {
        inset: -24px;
        opacity: 0.28;
        border-color: rgba(0, 122, 255, 0.45);
        box-shadow:
            0 0 28px rgba(0, 122, 255, 0.35),
            0 0 48px rgba(0, 122, 255, 0.2);
    }

    100% {
        inset: -30px;
        opacity: 0;
        border-color: rgba(0, 122, 255, 0);
        box-shadow: none;
    }
}

.sc-oh-tutorial-pointer {
    position: fixed;
    z-index: 1000002;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: #e5f0f4;
    background: #000c21;
    border: 2px solid #007aff;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.45);
    font-size: 15px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: scOhTutorialFingerNudge 1.4s ease-in-out infinite;
}

@keyframes scOhTutorialFingerNudge {
    0%, 100% {
        margin-top: 0;
    }

    50% {
        margin-top: -5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-oh-tutorial-cue-pulse,
    .sc-oh-tutorial-pointer {
        animation: none;
    }

    .sc-oh-tutorial-cue-pulse {
        inset: -18px;
        opacity: 0.65;
    }
}

.sc-oh-intro-mask-tooltip {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Force Intro.js mask to be visually dark but pass clicks through. 
   Our custom controller's global interaction guards handle click blocking. */
.introjs-overlay,
.introjs-helperLayer,
.introjs-tooltipReferenceLayer,
.introjs-disableInteraction {
    pointer-events: none !important;
}

/* 
  Fix Mapbox Marker Disappearance:
  Prevent Intro.js from changing the target's position to relative. 
  Mapbox markers rely on position: absolute to stay on the map canvas. 
  If they become relative, they collapse to 0x0 and jump offscreen,
  breaking both the Intro.js cutout and our custom blue pulse.
*/
.introjs-showElement,
.introjs-relativePosition {
    position: revert !important;
    z-index: revert !important;
}

@media (max-width: 991px) {
    #sc-map-preview-wrap.introjs-showElement,
    #sc-map-preview-wrap.introjs-relativePosition {
        position: fixed !important;
        z-index: 9999999 !important;
    }
}

/* Ensure the blue pulse and pointer finger ALWAYS float above the dark mask */
.sc-oh-tutorial-cue {
    z-index: 2147483647 !important;
}

.sc-oh-tutorial-pointer {
    z-index: 2147483647 !important;
}
#sc-tutorial-center-ghost.introjs-showElement {
    position: absolute !important;
    top: calc(50% - 20px) !important;
    left: 50% !important;
}

body[data-sc-tutorial-step="filter-button"] .sc-oh-tutorial-tooltip {
    top: 29%;
    transform: translate(-50%, -50%);
}

body[data-sc-tutorial-step="list-view-times"] .sc-oh-tutorial-tooltip {
    z-index: 99999999 !important;
    top: 64%;
}

body[data-sc-tutorial-step="your-tour-drag"] .sc-oh-tutorial-tooltip {
    z-index: 99999999 !important;
}

body[data-sc-tutorial-step="go-on-tour"] .sc-oh-tutorial-tooltip {
    z-index: 99999999 !important;
}

body[data-sc-tutorial-step="list-view-intro"] .sc-oh-tutorial-tooltip {
    z-index: 99999999 !important;
    top: 82%;
}

body[data-sc-tutorial-step="list-view-actions"] .sc-oh-tutorial-tooltip {
    z-index: 99999999 !important;
    top: 82%;
}


/* STEP 12 PROXY TARGET */
#sc-tutorial-your-tour-focus,
#sc-tutorial-your-tour-focus.introjs-showElement,
#sc-tutorial-your-tour-focus.introjs-relativePosition {
    position: fixed !important;
    pointer-events: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    body[data-sc-tutorial-step="filter-beds"] .sc-oh-tutorial-tooltip {
        top: 24%;
        transform: translate(-50%, 44%);
    }

    body[data-sc-tutorial-step="map-pins"] .sc-oh-tutorial-tooltip {
        top: 69%;
        transform: translate(-50%, -50%);
    }

    body[data-sc-tutorial-step="added-actions"] .sc-oh-tutorial-tooltip {
        top: 5%;
        transform: translate(-50%, 54%);
    }

    body[data-sc-tutorial-step="add-to-tour"] .sc-oh-tutorial-tooltip {
        top: 20%;
        transform: translate(-50%, 54%);
    }

    body[data-sc-tutorial-step="list-view-intro"] .sc-oh-tutorial-tooltip,
    body[data-sc-tutorial-step="list-view-actions"] .sc-oh-tutorial-tooltip {
        top: 26%;
    }

    body[data-sc-tutorial-step="list-view-times"] .sc-oh-tutorial-tooltip {
        top: 82%;
    }

    body[data-sc-tutorial-step="your-tour-drag-mobile"] .sc-oh-tutorial-tooltip {
        top: 70%;
        position: fixed !important;
        z-index: 2147483647 !important;
    }
}

body[data-sc-tutorial-step="go-on-tour"] #floating-tour-btn {
    z-index: 2147483647 !important;
}