/*
 * Speech-bubble skin for Shepherd.js tours (backend welcome tour + login tour).
 * White bubble, dark text - only the primary button uses TYPO3's brand
 * orange (see ext_localconf.php loginHighlightColor).
 */
:root {
  --guidedtour-accent: #ff8700;
  --guidedtour-accent-contrast: #ffffff;
  --guidedtour-text: #2d2d2d;
}

.shepherd-element {
  position: relative;
  /* Never wider than the viewport, whatever floating-ui computes */
  max-width: min(380px, calc(100vw - 1.5rem));
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff;
}

.shepherd-element.guidedtour-has-mascot {
  overflow: visible;
  margin-top: 40px;
}

.shepherd-content {
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.guidedtour-progress {
  margin: 0.75rem 1rem 1rem;
}

.guidedtour-progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--guidedtour-text);
  opacity: 0.55;
  margin-bottom: 0.35rem;
}

.guidedtour-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.guidedtour-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--guidedtour-accent);
  transition: width 0.3s ease;
}

.shepherd-has-title .shepherd-content .shepherd-header {
  background: transparent;
  padding: 1rem 1rem 0;
}

.shepherd-title {
  color: var(--guidedtour-text);
  font-weight: 700;
  font-size: 1rem;
}

.shepherd-cancel-icon {
  color: var(--guidedtour-text);
  opacity: 0.5;
}

.shepherd-cancel-icon:hover {
  opacity: 0.9;
}

.shepherd-text {
  padding: 0.5rem 1rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--guidedtour-text);
}

.shepherd-text a {
  color: var(--guidedtour-accent);
}

.shepherd-text a:hover {
  color: #e67a00;
}

.guidedtour-mascot {
  position: absolute;
  top: -74px;
  right: 10px;
  height: 84px;
  width: auto;
  margin: 0;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.shepherd-footer {
  padding: 0 1rem 0.5rem;
  gap: 0.5rem;
}

/* When a step has no progress bar (e.g. the login tour), restore full footer spacing */
.shepherd-footer:last-child {
  padding-bottom: 1rem;
}

.shepherd-button {
  background: var(--guidedtour-accent);
  color: var(--guidedtour-accent-contrast);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
}

.shepherd-button:not(:disabled):hover {
  background: #e67a00;
}

.shepherd-button.shepherd-button-secondary {
  background: #efefef;
  color: var(--guidedtour-text);
}

.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
  background: #e2e2e2;
  color: var(--guidedtour-text);
}

.shepherd-arrow:before {
  background-color: #fff !important;
}

.shepherd-modal-overlay-container {
  opacity: 0.5;
}

/* Content editing steps: no modal overlay, bubble fixed to the right edge */
.guidedtour-interactive.shepherd-element {
  position: fixed !important;
  top: 50% !important;
  right: 20px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

/* When promoted to top layer via Popover API, keep the same fixed position */
.guidedtour-interactive:popover-open {
  position: fixed !important;
  top: 50% !important;
  right: 20px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  inset: unset;
}

/* Hide the automatic popover backdrop so the UI behind stays fully interactive */
.guidedtour-interactive::backdrop {
  display: none;
}

.guidedtour-interactive .shepherd-arrow {
  display: none;
}

/* User step 2: opened flyout sits on the right, bubble positioned to its left */
[data-shepherd-step-id="user2"].shepherd-element {
  top: 80px !important;
  right: 500px !important;
  left: auto !important;
  transform: none !important;
}

/* Login tour: undo the mascot margin-top (not needed here) and add breathing room from the card */
[data-shepherd-step-id="info"].shepherd-element {
  margin-top: 0;
  margin-left: 20px;
}


/* Toolbar item: T3ppy as a round, cropped avatar next to the label, mirroring
the user toolbar item (.toolbar-item-avatar > .avatar > .avatar-image).
Core's .avatar classes are deliberately not reused: their `img` rule forces
height:auto !important, which letterboxes the mascot instead of cropping it. */
.guidedtour-toolbar-avatar {
  --guidedtour-toolbar-avatar-size: 24px;
  display: block;
  position: relative;
  width: var(--guidedtour-toolbar-avatar-size);
  height: var(--guidedtour-toolbar-avatar-size);
  /* Same optical alignment as core's .toolbar-item-avatar .avatar */
  margin-inline: -3px;
  border-radius: 50%;
  overflow: hidden;
  /* The SVG is transparent - without a plate the dark outlines vanish on a dark header */
  background: #fffcf5;
}

.guidedtour-toolbar-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

.guidedtour-toolbar-avatar > img {
  position: absolute;
  /* Cropped to T3ppy's face rather than the whole figure: at 24px the full body
  is unreadable. Sized rather than transform:scale()d on purpose, so the browser
  rasterises the SVG at its real painted size instead of stretching a bitmap. */
  width: 210%;
  height: 223%;
  max-width: none;
  left: -67%;
  top: -18%;
  object-fit: cover;
}