.gmfx-momentum{.gmf-guided-tour{display:none;pointer-events:none;&.is-open{display:block;pointer-events:auto}
// --------------------------------------------------------------------------- // Overlay – full-screen click-catcher. The dim itself is painted by the // spotlight box-shadow so the highlighted element stays fully readable. // --------------------------------------------------------------------------- .gmf-guided-tour__overlay{position:fixed;top:0;left:0;width:100%;height:100%;// background-color:rgba(0,0,0,0.55);z-index:9010}
// --------------------------------------------------------------------------- // Spotlight – transparent rectangle positioned by JS in viewport coordinates // --------------------------------------------------------------------------- .gmf-guided-tour__spotlight{position:fixed;z-index:9020;border-radius:4px;box-shadow:0 0 0 9999px rgba(0,0,0,0.55),0 0 0 3px #005dab;pointer-events:none;transition:top .3s ease,left .3s ease,width .3s ease,height .3s ease}
// --------------------------------------------------------------------------- // Popover panel – floating card,position set inline by JS // --------------------------------------------------------------------------- .gmf-guided-tour__popover{position:fixed;z-index:9030;background:#fff;border-radius:4px;box-shadow:0 4px 24px rgba(0,0,0,0.18);min-width:300px;max-width:380px;width:340px;padding:18px;outline:0;transition:top .3s ease,left .3s ease;// Arrow caret pointing toward target element &::before{content:'';position:absolute;width:0;height:0;border:8px solid transparent}
&.gmf-guided-tour__popover--bottom::before{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:#fff}
&.gmf-guided-tour__popover--top::before{top:100%;left:50%;transform:translateX(-50%);border-top-color:#fff}
&.gmf-guided-tour__popover--right::before{right:100%;top:50%;transform:translateY(-50%);border-right-color:#fff;@media(max-width:@screen-sm-max){left:50%;top:-16px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
}
&.gmf-guided-tour__popover--left::before{left:100%;top:50%;transform:translateY(-50%);border-left-color:#fff;@media(max-width:@screen-sm-max){left:50%;top:-16px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}
}
@media(min-width:@screen-sm-min) and (max-width:@screen-sm-max){min-width:100%;max-width:100%;width:100%;bottom:13% !important;left:0 !important}
@media(max-width:@screen-sm-max){min-width:0;max-width:calc(100vw - 32px);width:calc(100vw - 32px);position:fixed !important;bottom:16px !important;left:16px !important;top:auto !important}
@media(max-width:@screen-xs-min){max-width:100%;width:100%;bottom:0 !important;left:0 !important;top:auto !important;padding:15px;z-index:9999999999}
// Header .gmf-guided-tour__header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.gmf-guided-tour__title{margin:0;font-size:20px;font-weight:600;line-height:1.3;color:#494949;flex:1;padding-right:12px}
// Close button – renders an × via pseudo-elements .gmf-guided-tour__close{background:0;border:0;padding:0;cursor:pointer;width:24px;height:24px;flex-shrink:0;position:relative;opacity:.6;transition:opacity .2s;&:hover{opacity:1}
&:focus{outline:0;outline-offset:unset}
&::before,&::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:2px;background:#494949;border-radius:1px}
&::before{transform:translate(-50%,-50%) rotate(45deg)}
&::after{transform:translate(-50%,-50%) rotate(-45deg)}
}
// Body .gmf-guided-tour__body{font-size:16px;line-height:1.5;color:#494949;margin-bottom:20px;@media(min-width:@screen-sm-min) and (max-width:@screen-sm-max){font-size:26px}
p:last-child{margin-bottom:0}
}
// Footer .gmf-guided-tour__footer{border-top:1px solid #bbbcbd;padding-top:16px}
// "Don't show again" checkbox row .gmf-guided-tour__no-repeat{display:flex;align-items:center;margin-bottom:10px}
.gmf-guided-tour__no-repeat-label{display:flex;align-items:center;cursor:pointer;font-size:14px;color:#494949;user-select:none;margin-bottom:0;width:100%;input[type="checkbox"]{width:16px;height:16px;margin:0 5px 3px 0;cursor:pointer;accent-color:#005dab;flex-shrink:0;position:unset;opacity:1;top:unset}
}
// Step dots indicator .gmf-guided-tour__dots{display:flex;justify-content:center;align-items:center;gap:6px;margin:14px 0;.gmf-guided-tour__dot{width:8px;height:8px;border-radius:50%;background:#BBBCBD;border:0;padding:0;cursor:pointer;transition:background .2s,transform .2s;&:hover{background:#747578}
&.gmf-guided-tour__dot--active{background:#005dab;transform:scale(1.35)}
}
}
// Navigation buttons .gmf-guided-tour__actions{display:flex;justify-content:space-between;align-items:center;gap:8px;.btn{min-width:80px;font-size:12px;padding:8px 0}
}
.gmf-guided-tour__actions{display:flex;justify-content:space-between;gap:8px;.btn{min-width:80px}
}
}
}
}