.customer-tutorial-spotlight{
  position:fixed;
  z-index:1200;
  pointer-events:none;
  border:var(--ht-master-tour-spotlight-border-width) solid var(--ht-color-accent);
  border-radius:var(--ht-master-tour-spotlight-radius);
  background:transparent;
  box-shadow:var(--ht-master-tour-spotlight-shadow);
  opacity:1;
  will-change:left,top,width,height,opacity;
  transition:left var(--ht-master-tour-motion-travel) var(--ht-master-tour-motion-ease),top var(--ht-master-tour-motion-travel) var(--ht-master-tour-motion-ease),width var(--ht-master-tour-motion-travel) var(--ht-master-tour-motion-ease),height var(--ht-master-tour-motion-travel) var(--ht-master-tour-motion-ease),opacity var(--ht-master-tour-motion-fade) var(--ht-master-motion-ease);
}
.customer-tutorial-popover{
  position:fixed;
  z-index:1201;
  box-sizing:border-box;
  width:min(390px,calc(100vw - 24px));
  margin:0;
  padding:18px;
  border:1px solid var(--ht-surface-card-border);
  border-radius:var(--ht-master-tour-popover-radius);
  background:var(--ht-surface-card);
  color:var(--ht-text-primary);
  box-shadow:var(--ht-master-tour-popover-shadow);
  opacity:1;
  transform:translateY(0) scale(1);
  transform-origin:center;
  will-change:transform,opacity,left,top;
  transition:opacity var(--ht-master-tour-motion-fade) var(--ht-master-tour-motion-ease),transform var(--ht-master-tour-motion-popover) var(--ht-master-tour-motion-ease),left var(--ht-master-tour-motion-travel) var(--ht-master-tour-motion-ease),top var(--ht-master-tour-motion-travel) var(--ht-master-tour-motion-ease);
}
.customer-tutorial-popover[hidden],
.customer-tutorial-spotlight[hidden]{display:none}
.customer-tutorial-spotlight.is-transitioning{opacity:.82}
.customer-tutorial-spotlight.is-dismissed{opacity:0}
.customer-tutorial-spotlight.is-leaving{opacity:0}
.customer-tutorial-spotlight.is-entering{opacity:0}
.customer-tutorial-popover.is-leaving{opacity:0;transform:translateY(var(--ht-master-tour-popover-transition-y)) scale(var(--ht-master-tour-popover-transition-scale));pointer-events:none}
.customer-tutorial-popover.is-entering{opacity:0;transform:translateY(var(--ht-master-tour-popover-transition-y)) scale(var(--ht-master-tour-popover-transition-scale))}
.customer-tutorial-progress{
  color:var(--ht-color-accent);
  font-size:.65rem;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.customer-tutorial-popover h2{
  margin:7px 0 9px;
  color:var(--ht-text-primary);
  font-size:1.05rem;
  line-height:1.32;
  letter-spacing:.01em;
  font-kerning:normal;
}
.customer-tutorial-popover p{
  margin:0;
  color:var(--ht-text-muted);
  font-size:.8rem;
  line-height:1.6;
  letter-spacing:.01em;
  font-kerning:normal;
}
.customer-tutorial-actions{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:15px;
}
.customer-tutorial-actions [data-close]{margin-right:auto}
.customer-tutorial-actions .btn{min-height:38px}
@media(max-width:700px){
  .customer-tutorial-popover{
    width:calc(100vw - 20px);
    padding:15px;
    border-radius:13px;
  }
  .customer-tutorial-popover p{font-size:.76rem}
  .customer-tutorial-actions{gap:6px}
  .customer-tutorial-actions .btn{padding-left:10px;padding-right:10px}
}
@media(prefers-reduced-motion:reduce){
  .customer-tutorial-spotlight,
  .customer-tutorial-popover{transition:none}
}

.customer-tutorial-route-cue{
  position:fixed;
  z-index:1202;
  left:50%;
  top:max(18px,env(safe-area-inset-top));
  max-width:calc(100vw - 28px);
  padding:9px 14px;
  border:1px solid var(--ht-surface-card-border);
  border-radius:var(--ht-master-tour-route-radius);
  background:var(--ht-surface-card);
  color:var(--ht-text-primary);
  box-shadow:var(--ht-surface-shadow);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  opacity:0;
  transform:translate(-50%,var(--ht-master-tour-route-transition-y)) scale(var(--ht-master-tour-route-transition-scale));
  pointer-events:none;
  transition:opacity var(--ht-master-tour-motion-fade) var(--ht-master-motion-ease),transform var(--ht-master-tour-motion-route) var(--ht-master-tour-motion-ease);
}
.customer-tutorial-route-cue.is-visible{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
#portalSectionTitle.customer-tutorial-destination-pulse{
  animation:customerTutorialDestinationPulse var(--ht-master-tour-destination-pulse-duration) var(--ht-master-tour-motion-ease);
}
@keyframes customerTutorialDestinationPulse{
  0%{opacity:.35;transform:translateY(7px)}
  48%{opacity:1;transform:translateY(0)}
  100%{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .customer-tutorial-route-cue{transition:none}
  #portalSectionTitle.customer-tutorial-destination-pulse{animation:none!important;transform:none!important}
}

/* Guided-tour interaction lock: underlying app is instructional only. */
body.customer-tutorial-active .portal-app-shell,
body.customer-tutorial-active > header,
body.customer-tutorial-active .portal-bottom-nav,
body.customer-tutorial-active .portal-nav-backdrop{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
body.customer-tutorial-active #customerTutorialPopover{
  pointer-events:auto!important;
  user-select:text;
  -webkit-user-select:text;
}
