/* ==========================================================
   OVERLAY
========================================================== */

#tourOverlay{

    position:fixed;

    inset:0;

    z-index:99990;

    display:none;

}

#tourOverlay.show{

    display:block;

}

#tourTop,
#tourLeft,
#tourRight,
#tourBottom{

    position:fixed;

    background:rgba(15,23,42,.70);

    backdrop-filter:blur(4px);

    transition:.35s;

}


/* ==========================================================
   HIGHLIGHT
========================================================== */

#tourHighlight{

    position: fixed;

    display: none;

    border-radius: 16px;

    border: 3px solid #60A5FA;

    box-shadow:
        0 0 0 9999px rgba(15,23,42,.55),
        0 10px 35px rgba(59,130,246,.35);

    transition:
        left .35s,
        top .35s,
        width .35s,
        height .35s;

    pointer-events: none;

    z-index: 99991;

}


/* ==========================================================
   POPUP
========================================================== */

#tourPopup{

    position: fixed;

    width: 380px;

    background: #fff;

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

    padding: 22px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition: .30s;

    z-index: 99992;

}


/* tampil */

#tourPopup.show{

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}


/* ==========================================================
   HEADER
========================================================== */

.tour-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:16px;

}

#tourStep{

    display:block;

    color:#64748B;

    font-size:13px;

    margin-bottom:6px;

}

#tourTitle{

    margin:0;

    color:#1E3A8A;

    font-size:22px;

    font-weight:700;

}


/* ==========================================================
   CLOSE
========================================================== */

#tourClose{

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;

    line-height:1;

}


/* ==========================================================
   DESCRIPTION
========================================================== */

#tourDescription{

    color:#475569;

    line-height:1.7;

    margin-bottom:18px;

}


/* ==========================================================
   PROGRESS
========================================================== */

.tour-progress{

    height:8px;

    background:#E5E7EB;

    border-radius:100px;

    overflow:hidden;

    margin-bottom:20px;

}

#tourProgressBar{

    width:0;

    height:100%;

    background:#2563EB;

    transition:.35s;

}


/* ==========================================================
   FOOTER
========================================================== */

.tour-footer{

    display:flex;

    justify-content:space-between;

    gap:10px;

}

.tour-footer button{

    flex:1;

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    #tourPopup{

        width:92vw;

        left:4vw !important;

        right:4vw;

    }

}

#tourHighlight{

    transition:
        left .35s ease,
        top .35s ease,
        width .35s ease,
        height .35s ease;

}

@keyframes tourPulse {

    0% {
        box-shadow:
            0 0 0 9999px rgba(15,23,42,.55),
            0 0 0 rgba(96,165,250,.6);
    }

    50% {
        box-shadow:
            0 0 0 9999px rgba(15,23,42,.55),
            0 0 25px rgba(96,165,250,.9);
    }

    100% {
        box-shadow:
            0 0 0 9999px rgba(15,23,42,.55),
            0 0 0 rgba(96,165,250,.6);
    }

}

#tourHighlight {

    animation: tourPulse 1.6s infinite;

}