.noa-tour-shade {
    background: rgba(7, 28, 32, .62);
    pointer-events: none;
    position: fixed;
    transition: all .2s ease;
    z-index: 2000;
}

.noa-tour-target {
    outline: 4px solid #40c3bc !important;
    outline-offset: 5px;
}

.noa-tour-card {
    background: #fff;
    border: 1px solid #d7e4e5;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 25, 29, .28);
    color: #173b3f;
    max-width: calc(100vw - 24px);
    padding: 1.15rem;
    position: fixed;
    width: 390px;
    z-index: 2002;
}

.noa-tour-card__top,
.noa-tour-card__actions,
.noa-tour-card__progress {
    align-items: center;
    display: flex;
}

.noa-tour-card__top { gap: .8rem; justify-content: space-between; }

.noa-tour-card__badge {
    background: #e1f5f2;
    border-radius: 999px;
    color: #09696a;
    font-size: .75rem;
    font-weight: 800;
    padding: .35rem .65rem;
}

.noa-tour-card__close {
    align-items: center;
    background: #edf2f3;
    border: 0;
    border-radius: 50%;
    color: #3f5155;
    display: flex;
    font-size: 1.1rem;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.noa-tour-card h2 { color: #0b363a; font-size: 1.22rem; margin: 1rem 0 .45rem; }
.noa-tour-card p { color: #5e6d72; line-height: 1.55; margin-bottom: 1rem; }
.noa-tour-card__progress { gap: .65rem; margin-bottom: 1rem; }

.noa-tour-card__track {
    background: #e7edef;
    border-radius: 999px;
    flex: 1;
    height: 6px;
    overflow: hidden;
}

.noa-tour-card__track span {
    background: #16918e;
    display: block;
    height: 100%;
    transition: width .2s ease;
}

.noa-tour-card__progress small { color: #6b777b; white-space: nowrap; }
.noa-tour-card__actions { gap: .55rem; justify-content: flex-end; }
.noa-tour-card__actions .btn { min-width: 94px; }

.noa-tour-card--complete {
    left: 50% !important;
    max-width: calc(100vw - 28px);
    text-align: center;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: 430px;
}

.noa-tour-complete-icon {
    align-items: center;
    background: #e1f5ed;
    border-radius: 50%;
    color: #137153;
    display: flex;
    font-size: 2.5rem;
    height: 76px;
    justify-content: center;
    margin: .4rem auto;
    width: 76px;
}

body.dark .noa-tour-card { background: #173a3e; border-color: #3d5a5e; color: #edf6f6; }
body.dark .noa-tour-card h2 { color: #fff; }
body.dark .noa-tour-card p { color: #c7d2d4; }

@media (max-width: 575.98px) {
    .noa-tour-card {
        bottom: 10px !important;
        left: 10px !important;
        top: auto !important;
        transform: none;
        width: calc(100vw - 20px);
    }

    .noa-tour-card--complete {
        bottom: auto !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%);
    }
}