/* The demo portals' guided tour (public/assets/js/ht_tour.js). Everything sits above Bootstrap's modal (1055). */
.ht-tour-bar { position: fixed; right: 16px; bottom: 16px; z-index: 1065; display: flex; align-items: center; gap: 4px;
               background: #fff; color: #1d2327; border: 1px solid #d7dbe0; border-radius: 999px; padding: 6px 8px;
               box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font: 500 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ht-tour-bar button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: 999px;
                      padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.ht-tour-bar button:hover, .ht-tour-bar button:focus-visible { background: #f1f3f5; outline: none; }
.ht-tour-bar button[disabled] { opacity: .35; cursor: default; }
.ht-tour-bar .ht-tour-main { background: #198754; color: #fff; padding: 10px 16px; font-weight: 600; }
.ht-tour-bar .ht-tour-main:hover { background: #157347; }
.ht-tour-bar .ht-tour-main.ht-pulse { animation: ht-tour-pulse 2s ease-out infinite; }
.ht-tour-bar .ht-tour-count { padding: 0 6px; color: #5b646b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-tour-bar svg { width: 16px; height: 16px; fill: currentColor; display: block; }
@keyframes ht-tour-pulse { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .55); } 70% { box-shadow: 0 0 0 14px rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } }

.ht-tour-spot { position: absolute; z-index: 1060; pointer-events: none; border-radius: 10px; border: 2px solid #198754;
                box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .5), 0 0 0 6px rgba(25, 135, 84, .25);   /* 100vmax: Chrome drops a 9999px spread */
                transition: top .55s cubic-bezier(.2, .8, .2, 1), left .55s cubic-bezier(.2, .8, .2, 1), width .55s ease, height .55s ease, opacity .3s; }
.ht-tour-spot.ht-off { opacity: 0; }

.ht-tour-pointer { position: absolute; z-index: 1062; width: 28px; height: 36px; pointer-events: none; opacity: 0;
                   transition: transform .85s cubic-bezier(.3, .9, .3, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.ht-tour-pointer.ht-on { opacity: 1; }
.ht-tour-pointer.ht-click { animation: ht-tour-click .35s ease; }
@keyframes ht-tour-click { 0% { scale: 1; } 50% { scale: .8; } 100% { scale: 1; } }

.ht-tour-cap { position: absolute; z-index: 1063; max-width: min(420px, calc(100vw - 32px)); background: #fff; color: #1d2327;
               border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); border: 1px solid #d7dbe0;
               font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; opacity: 0; transition: opacity .3s, top .45s ease, left .45s ease; }
.ht-tour-cap.ht-on { opacity: 1; }
.ht-tour-cap .ht-tour-step { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #198754; margin-bottom: 4px; }
.ht-tour-cap .ht-tour-tap { margin-top: 10px; }
.ht-tour-cap .ht-tour-tap button { background: #198754; color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.ht-tour-cap::after { content: ""; position: absolute; width: 14px; height: 14px; background: #fff; border-left: 1px solid #d7dbe0; border-top: 1px solid #d7dbe0; transform: rotate(45deg); }
.ht-tour-cap.ht-below::after { top: -8px; left: 28px; }
.ht-tour-cap.ht-above::after { bottom: -8px; left: 28px; transform: rotate(225deg); }
.ht-tour-cap.ht-fixed { position: fixed; left: 16px; right: 16px; bottom: 76px; max-width: none; }
.ht-tour-cap.ht-fixed::after { display: none; }

@media (max-width: 575.98px) {
    .ht-tour-bar { left: 12px; right: 12px; bottom: 12px; justify-content: center; }
    .ht-tour-bar .ht-tour-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ht-tour-spot, .ht-tour-pointer, .ht-tour-cap { transition: none; }
    .ht-tour-bar .ht-tour-main.ht-pulse { animation: none; }
}