/**
 * Studio Hub guided tour — intro/complete modals + spotlight overlay.
 */

.ygt-overlay {
  --ygt-overlay-bg: rgba(15, 18, 24, 0.58);
  --ygt-dialog-bg: var(--ysh-card, #ffffff);
  --ygt-title: var(--ysh-heading, #2a3340);
  --ygt-lead: var(--ysh-muted, #667085);
  position: fixed;
  inset: 0;
  z-index: 1000005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--ygt-overlay-bg);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.ygt-overlay.ygt-visible {
  opacity: 1;
  visibility: visible;
}

.ygt-dialog {
  position: relative;
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--ygt-dialog-bg);
  border-radius: 16px;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.28s ease;
}

.ygt-overlay.ygt-visible .ygt-dialog {
  transform: translateY(0) scale(1);
}

.ygt-layout {
  display: grid;
  grid-template-columns: 1fr min(42%, 360px);
  min-height: 320px;
}

.ygt-copy {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ygt-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ysh-brand, var(--yp-brand, #eda934));
}

.ygt-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ygt-title);
}

.ygt-duration-tag {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: 0.45em;
  padding: 3px 9px;
  max-width: none;
  width: auto;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ygt-lead);
  background: color-mix(in srgb, var(--ysh-brand, var(--yp-brand, #eda934)) 12%, #f4f5f7);
  border: 1px solid color-mix(in srgb, var(--ysh-brand, var(--yp-brand, #eda934)) 22%, #e5e7eb);
  border-radius: 6px;
}

.ygt-duration-tag__tilde {
  margin-inline-end: 0.2em;
  color: color-mix(in srgb, var(--ysh-brand, var(--yp-brand, #eda934)) 75%, var(--ygt-lead));
  font-weight: 600;
}

html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-duration-tag,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-duration-tag {
  color: var(--ysh-text, #cfd6e0);
  background: color-mix(in srgb, var(--ysh-brand, #eda934) 16%, rgba(255, 255, 255, 0.08));
  border-color: color-mix(in srgb, var(--ysh-brand, #eda934) 28%, rgba(255, 255, 255, 0.12));
}

.ygt-lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ygt-lead);
  max-width: 48ch;
}

.ygt-section-label {
  margin: 4px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ygt-lead) 72%, transparent);
}

.ygt-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ygt-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ygt-lead);
}

.ygt-features li:last-child {
  margin-bottom: 0;
}

.ygt-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  font-size: 16px;
  color: var(--ysh-brand, var(--yp-brand, #eda934));
}

.ygt-footnote {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ygt-lead) 78%, transparent);
}

.ygt-complete-thanks {
  margin-top: 4px;
}

.ygt-complete-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ygt-lead) 82%, transparent);
}

.ygt-dialog--compact {
  max-width: 440px;
}

.ygt-dialog--picker {
  max-width: min(520px, 100%);
}

.ygt-overlay--picker .ygt-copy {
  padding-bottom: 20px;
}

.ygt-tour-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  max-height: min(340px, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ygt-lead, #667085) 38%, transparent) transparent;
}

.ygt-tour-picker-list::-webkit-scrollbar {
  width: 6px;
}

.ygt-tour-picker-list::-webkit-scrollbar-track {
  background: transparent;
}

.ygt-tour-picker-list::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--ygt-lead, #667085) 32%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.ygt-tour-picker-list::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--ygt-lead, #667085) 48%, transparent);
}

.ygt-tour-picker-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 14px;
  align-items: start;
  padding: 14px 14px 12px;
  border: 1px solid var(--ysh-border, #e5e7eb);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ygt-dialog-bg, #fff) 94%, #f4f5f7);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ygt-tour-picker-item.is-selected {
  border-color: color-mix(in srgb, var(--ysh-brand, var(--yp-brand, #eda934)) 55%, #e5e7eb);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ysh-brand, var(--yp-brand, #eda934)) 35%, transparent);
}

.ygt-tour-picker-item__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ygt-title);
}

.ygt-tour-picker-item__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ygt-lead);
}

.ygt-tour-picker-item__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 128px;
}

.ygt-actions--picker {
  margin-top: 4px;
}

.ygt-overlay--picker .ygt-eyebrow {
  margin-bottom: 2px;
}

.ygt-overlay--picker .ygt-tour-picker-item__actions .button,
.ygt-overlay--picker .ygt-actions--picker .button {
  width: 100%;
}

@media (max-width: 560px) {
  .ygt-tour-picker-item {
    grid-template-columns: 1fr;
  }

  .ygt-tour-picker-item__actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .ygt-overlay--picker .ygt-tour-picker-item__actions .button {
    flex: 1 1 auto;
  }
}

.ygt-copy--centered {
  text-align: center;
}

.ygt-actions--stack {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.ygt-actions--stack .button {
  width: 100%;
}

.ygt-link-muted.button-link {
  margin-top: 4px;
  color: var(--ygt-lead);
  text-decoration: none;
  font-size: 13px;
}

.ygt-link-muted.button-link:hover,
.ygt-link-muted.button-link:focus-visible {
  color: var(--_yp-primary, #eda934);
}

body.ygt-tour-active.ygt-step-widget-hide .yp-card-visibility-toggle,
body.ygt-tour-active.ygt-step-widget-hide .yp-section-visibility-toggle {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ygt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 8px;
}

/* Button chrome: yooadmin-yoo-buttons (yp-yoo-buttons.css) — layout only here. */
.ygt-actions .button,
.ygt-actions .button-primary,
.ygt-popover__nav .button,
.ygt-popover__nav .button-primary,
.ygt-tour-picker-item__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
}

.ygt-actions .button.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0.92;
  cursor: wait;
  pointer-events: none;
}

.ygt-actions .button.is-loading::before {
  content: none;
  display: none;
}

.ygt-actions .button.is-loading .ygt-btn-spinner {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ygt-btn-spin 0.7s linear infinite;
  opacity: 0.95;
}

.ygt-actions .button.is-loading .ygt-btn-label {
  line-height: 1.2;
  white-space: nowrap;
}

@keyframes ygt-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.ygt-visual {
  position: relative;
  background:
    radial-gradient(circle at 24% 18%, rgba(237, 169, 52, 0.16), transparent 46%),
    linear-gradient(155deg, #fff9f0 0%, #f5f7fb 52%, #edf1f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ygt-image {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(15, 18, 24, 0.1));
}

.ygt-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #7a8494;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.ygt-close:hover {
  color: #3d4654;
  background: #fff;
}

/* Active tour layer */
.ygt-tour-root {
  position: fixed;
  inset: 0;
  z-index: 1000004;
  pointer-events: none;
}

.ygt-tour-root.ygt-active {
  pointer-events: auto;
}

.ygt-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 24, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ygt-tour-root.ygt-active .ygt-backdrop {
  opacity: 1;
}

.ygt-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(15, 18, 24, 0.52);
  pointer-events: none;
  transition:
    top 0.18s ease,
    left 0.18s ease,
    width 0.18s ease,
    height 0.18s ease,
    border-radius 0.18s ease;
  z-index: 1;
}

.ygt-spotlight.ygt-spotlight--snap {
  transition: none;
}

body.ygt-tour-active .ygt-popover.ygt-popover--detached {
  transition: top 0.18s ease, left 0.18s ease, opacity 0.15s ease;
}

.ygt-popover {
  position: fixed;
  z-index: 2;
  width: min(360px, calc(100vw - 32px));
  background: var(--ysh-card, #fff);
  border: 1px solid var(--ysh-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  padding: 16px 16px 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}

.ygt-tour-root.ygt-active .ygt-popover.ygt-popover--visible,
body.ygt-tour-active .ygt-popover.ygt-popover--visible {
  opacity: 1;
  transform: translateY(0);
}

.ygt-popover__meta {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ysh-muted, #6b7280);
}

.ygt-popover__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ysh-heading, #1f2937);
  line-height: 1.3;
}

.ygt-popover__text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ysh-muted, #4b5563);
}

.ygt-popover__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ygt-popover__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 1 auto;
  max-width: 100%;
}

.ygt-popover__branch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ygt-popover__branch[hidden] {
  display: none !important;
}

body.ygt-tour-active .ygt-popover[hidden],
body.ygt-tour-active .ygt-popover.ygt-popover--demo-chrome-hidden,
body.ygt-tour-active .ygt-popover.ygt-popover--demo-playing {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ygt-popover__nav--dashboard-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ygt-popover__nav--dashboard-end .ygt-popover__branch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.ygt-tour-active .ygt-tour-layout-demo-active {
  position: relative;
  will-change: transform;
}

body.ygt-tour-active .ygt-tour-layout-demo-active.is-dragging,
body.ygt-tour-active .ygt-tour-layout-demo-active.is-section-dragging {
  box-shadow: 0 14px 32px rgba(15, 18, 24, 0.18);
}

/* Layout demo playback — same dim + spotlight ring as other tour steps. */
body.ygt-tour-active.ygt-step-layout-demo-focus.ygt-step-spotlight-only .ygt-tour-root .ygt-backdrop {
  opacity: 0 !important;
  visibility: hidden;
}

body.ygt-tour-active.ygt-layout-demo-animating
  .yp-dashboard-section.ygt-tour-layout-demo-active,
body.ygt-tour-active.ygt-layout-demo-animating
  .yp-dashboard-section.is-section-dragging,
body.ygt-tour-active.ygt-layout-demo-animating .ygt-tour-drag-clone {
  position: relative;
  z-index: 120 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Show me / demo playback — hide spotlight hole on Edit until animation ends. */
body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-spotlight[hidden] {
  display: none !important;
  box-shadow: none !important;
}

/* During layout demo playback — no orange frame on the Edit toggle. */
body.ygt-tour-active.ygt-step-layout-demo-focus
  .yp-card-edit-toggle.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-layout-demo-focus
  [data-icon-edit-toggle].ygt-tour-target-focus {
  box-shadow: none !important;
  z-index: auto !important;
}

body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-spotlight,
body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-spotlight--extra {
  z-index: 3;
}

body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-popover.ygt-popover--demo-pinned {
  z-index: 4;
  max-width: min(320px, calc(100vw - 32px));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-tour-layout-demo-active:not(.ygt-tour-drag-clone) {
  outline: 2px solid var(--_yp-primary, #eda934);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Cross-grid clone — ring via box-shadow so it stays glued while transform animates. */
body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-tour-drag-clone.ygt-tour-layout-demo-active {
  outline: none !important;
  border-radius: 8px;
  box-shadow:
    0 0 0 2px var(--ysh-brand, var(--_yp-primary, #eda934)),
    0 14px 32px rgba(15, 18, 24, 0.22) !important;
}

#ygt-tour-drop-target.ygt-tour-drop-target {
  display: none !important;
}

body.ygt-tour-active.ygt-step-layout-demo-focus .yp-layout-drop-gap,
body.ygt-tour-active.ygt-step-layout-demo-focus .yp-layout-edit-slots,
body.ygt-tour-active.ygt-step-layout-demo-focus [data-layout-slot],
body.ygt-tour-active.ygt-step-layout-demo-focus #ygt-tour-drop-target {
  display: none !important;
}

/* Invisible grid spacer only — never clone yp-studio-ws-row (that paints a white card). */
body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-tour-flip-placeholder {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: var(--ygt-flip-ph-h, 76px) !important;
  height: var(--ygt-flip-ph-h, 76px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

body.ygt-tour-active.ygt-step-layout-demo-focus .ygt-spotlight--extra {
  z-index: 2;
  box-shadow: 0 0 0 9999px rgba(15, 18, 24, 0.68);
}

.ygt-tour-drag-clone,
body.ygt-tour-active .ygt-tour-drag-clone.ygt-tour-layout-demo-active {
  position: fixed !important;
  z-index: 1000065 !important;
  pointer-events: none;
  opacity: 1 !important;
  filter: none !important;
  box-sizing: border-box;
  will-change: transform;
}

body.ygt-tour-active .ygt-tour-source-ghost {
  outline: none !important;
  box-shadow: none !important;
}

body.ygt-tour-active.ygt-tour-cross-grid-demo .yp-studio-hub__main,
body.ygt-tour-active.ygt-tour-cross-grid-demo .yp-studio-hub__aside,
body.ygt-tour-active.ygt-tour-cross-grid-demo .yp-dashboard-section {
  overflow: visible !important;
}

body.ygt-tour-active.ygt-tour-cross-grid-demo .yp-dashboard-section {
  z-index: 1 !important;
}

body.ygt-tour-active.ygt-step-add-section .yp-studio-hub,
body.ygt-tour-active.ygt-step-add-section .yp-studio-hub__main,
body.ygt-tour-active.ygt-step-add-section .yp-studio-hub__aside {
  overflow: visible !important;
}

body.ygt-tour-active.ygt-step-add-section .ygt-spotlight,
body.ygt-tour-active.ygt-step-add-section .ygt-spotlight--extra {
  transition: none !important;
}

body.ygt-tour-active .yp-studio-ws-row.ygt-tour-source-ghost,
body.ygt-tour-active [data-card-id].ygt-tour-source-ghost {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.ygt-tour-active.ygt-step-layout-demo-focus
  .yp-dashboard-section.is-section-dragging {
  opacity: 1 !important;
  pointer-events: none;
}

html[data-yooadmin-studio-color-mode-effective='dark'] #ygt-tour-drop-target.ygt-tour-drop-target,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark']
  #ygt-tour-drop-target.ygt-tour-drop-target {
  background: var(--ysh-card, #1a1d23);
  border-color: rgba(237, 169, 52, 0.85);
}

.ygt-skip {
  margin-inline-start: auto;
  background: none;
  border: none;
  color: var(--ysh-muted, #6b7280);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  padding: 4px 0;
}

.ygt-skip:hover {
  color: var(--ysh-heading, #374151);
}

body.ygt-tour-active {
  overflow: hidden;
}

body.ygt-tour-active.ygt-step-scrollable {
  overflow: auto;
  scroll-behavior: smooth;
}

body.ygt-tour-active.ygt-step-scrollable,
body.ygt-tour-active.ygt-step-scrollable #wpwrap {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ygt-lead, #667085) 34%, transparent) transparent;
}

body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar,
body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar-track,
body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar-track {
  background: transparent;
}

body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar-thumb,
body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--ygt-lead, #667085) 28%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar-thumb:hover,
body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--ygt-lead, #667085) 42%, transparent);
}

html body.ygt-tour-active.ygt-step-scrollable #wpwrap,
html body.ygt-tour-active.ygt-step-scrollable #wpcontent,
html body.ygt-tour-active.ygt-step-scrollable #wpbody-content {
  overflow: visible !important;
}

/* Spotlight-only steps — dim via box-shadow only (backdrop would wash out the hole). */
body.ygt-tour-active.ygt-step-sidebar .yp-header-wrapper,
body.ygt-tour-active.ygt-step-sidebar .yp-breadcrumbs-bar,
body.ygt-tour-active.ygt-step-breadcrumbs .yp-header-wrapper,
body.ygt-tour-active.ygt-step-breadcrumbs .yp-breadcrumbs-bar {
  z-index: 100000 !important;
}

body.ygt-tour-active.ygt-step-sidebar .yps-overlay {
  display: none !important;
}

body.ygt-tour-active.ygt-step-spotlight-only .ygt-tour-root {
  z-index: 1000005;
  pointer-events: none;
}

body.ygt-tour-active.ygt-step-spotlight-only .ygt-tour-root .ygt-backdrop {
  opacity: 0 !important;
  visibility: hidden;
}

body.ygt-tour-active.ygt-step-spotlight-only .ygt-spotlight {
  z-index: 1;
  background: transparent !important;
  border-radius: 12px;
  outline: none;
  border: none;
  box-shadow:
    0 0 0 2px var(--ysh-brand, var(--yp-brand, #eda934)),
    0 0 0 9999px rgba(15, 18, 24, 0.58);
}

body.ygt-tour-active.ygt-step-spotlight-only .ygt-spotlight--extra {
  z-index: 1;
  background: transparent !important;
  border-radius: 12px;
  outline: none;
  border: none;
  box-shadow:
    0 0 0 2px var(--ysh-brand, var(--yp-brand, #eda934)),
    0 0 0 9999px rgba(15, 18, 24, 0.58);
}

body.ygt-tour-active.ygt-step-add-section .yp-studio-layout-add.ygt-tour-target-focus {
  position: relative;
  z-index: 1000010 !important;
  isolation: isolate;
}

/* Spotlight-only — orange ring lives on .ygt-spotlight (same size + radius), not inset on the target. */
body.ygt-tour-active.ygt-step-spotlight-only .ygt-tour-target-focus {
  position: relative;
  z-index: 1000010 !important;
  isolation: isolate;
  outline: none !important;
  box-shadow: none !important;
}

body.ygt-tour-active.ygt-step-spotlight-only
  .yoo-upload-wrap[data-type='plugin']
  .yoo-plugin-card.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-spotlight-only
  .yoo-theme-manager-wrap
  .yoo-plugin-card.yoo-theme-card.ygt-tour-target-focus {
  position: relative;
  z-index: 1000010 !important;
  isolation: isolate;
}

/* Theme Manager tour — reveal hover-only actions (Install, Activate, etc.) */
body.ygt-tour-active
  .yoo-theme-manager-wrap
  .yoo-theme-card-media-wrap.ygt-tour-theme-hover
  .yoo-theme-card-hover-glass,
body.ygt-tour-active
  .yoo-theme-manager-wrap
  .yoo-theme-card-media-wrap.ygt-tour-theme-hover
  .yoo-theme-card-hover-text {
  opacity: 1;
  transform: scale(1);
}

body.ygt-tour-active
  .yoo-theme-manager-wrap
  .yoo-theme-card-media-wrap.ygt-tour-theme-hover
  .yoo-theme-card-top-tags--inactive-hover-only {
  opacity: 1;
  pointer-events: auto;
}

body.ygt-tour-active
  .yoo-theme-manager-wrap
  .yoo-theme-card-media-wrap.ygt-tour-theme-hover
  .yoo-theme-card__actions-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.ygt-tour-active.ygt-step-spotlight-only
  .yoo-theme-manager-wrap
  .yoo-theme-card__actions-bar.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-spotlight-only
  .yoo-theme-manager-wrap
  .yoo-repo-install.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-spotlight-only
  .yoo-theme-manager-wrap
  .yoo-media-float-btn.ygt-tour-target-focus {
  position: relative;
  z-index: 1000012 !important;
  isolation: isolate;
}

body.ygt-tour-active.ygt-step-sidebar .ygt-spotlight,
body.ygt-tour-active.ygt-step-breadcrumbs .ygt-spotlight {
  border-radius: 0;
}

body.ygt-tour-active.ygt-step-sidebar #yps-sidebar.is-open,
body.ygt-tour-active.ygt-step-breadcrumbs .yp-breadcrumbs-bar {
  z-index: 100000;
  pointer-events: auto;
}

body.ygt-tour-active .ygt-popover.ygt-popover--detached,
body.ygt-tour-active.ygt-step-spotlight-only .ygt-popover {
  z-index: 1000020 !important;
  pointer-events: auto;
}

/* Notifications step — keep header/breadcrumbs behind overlay; only portaled dropdown + popover on top. */
body.ygt-tour-active.ygt-step-notifications .yp-header-wrapper,
body.ygt-tour-active.ygt-step-notifications .yp-breadcrumbs-bar {
  z-index: 100000 !important;
}

body.ygt-tour-active.ygt-step-notifications .yp-notifications-dropdown.show,
body.ygt-tour-active.ygt-step-notifications .yp-notifications-dropdown.ygt-notifications-dropdown--tour.show {
  position: fixed !important;
  top: var(--ygt-notif-dropdown-top, 52px) !important;
  right: var(--ygt-notif-dropdown-right, 24px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 380px !important;
  max-width: min(380px, calc(100vw - 32px)) !important;
  max-height: min(560px, calc(100vh - 96px)) !important;
  pointer-events: auto;
  z-index: 1000015 !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ysh-brand, var(--yp-brand, #eda934)) 70%, transparent),
    0 12px 40px rgba(0, 0, 0, 0.22) !important;
}

body.ygt-tour-active.ygt-step-notifications .ygt-tour-root {
  z-index: 1000004;
  pointer-events: none;
}

body.ygt-tour-active.ygt-step-notifications .ygt-tour-root .ygt-backdrop {
  pointer-events: none;
}

body.ygt-tour-active.ygt-step-notifications .ygt-popover,
body.ygt-tour-active.ygt-step-notifications .ygt-popover.ygt-popover--detached {
  z-index: 1000020 !important;
  pointer-events: auto;
}

/* Workspace Edit — button is hover-only in dashboard CSS; force visible for tour spotlight. */
body.ygt-tour-active.ygt-step-workspace-edit
  [data-section-id='your-workspace']
  .yp-card-header-actions
  [data-icon-edit-toggle],
body.ygt-tour-active.ygt-step-workspace-edit
  [data-section-id='your-workspace']
  .yp-card-edit-toggle,
body.ygt-tour-active
  [data-section-id='your-workspace'].ygt-tour-reveal-edit
  .yp-card-header-actions
  [data-icon-edit-toggle] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.ygt-tour-active.ygt-step-workspace-edit .ygt-tour-target-focus.yp-card-edit-toggle {
  z-index: 1000010 !important;
}

body.ygt-tour-active.ygt-step-spotlight-only
  .yooadmin-theme-settings-section-brand-colors.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-spotlight-only
  #tab-brand.is-active .yp-settings-card.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-spotlight-only
  #tab-login.is-active .yp-login-split.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-spotlight-only
  #tab-login.is-active .yooadmin-login-tab-stack.ygt-tour-target-focus,
body.ygt-tour-active.ygt-step-spotlight-only
  #tab-login.is-active #yooadmin-login-tab-stack.ygt-tour-target-focus {
  position: relative;
  z-index: 1000010 !important;
  isolation: isolate;
}

body.ygt-tour-active.ygt-step-add-section .yp-studio-layout-add.ygt-tour-target-focus {
  position: relative;
  z-index: 1000010 !important;
  isolation: isolate;
}

html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-overlay,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-overlay {
  --ygt-overlay-bg: rgba(0, 0, 0, 0.62);
  --ygt-dialog-bg: var(--ysh-card, #1a1d23);
  --ygt-title: var(--ysh-heading, #d8d3ce);
  --ygt-lead: var(--ysh-muted, #9aa5b1);
}

html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-visual,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-visual {
  background:
    radial-gradient(circle at 24% 18%, rgba(237, 169, 52, 0.14), transparent 46%),
    linear-gradient(155deg, #1f232b 0%, #121418 100%);
}

html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-item,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-item {
  background: color-mix(in srgb, var(--ygt-dialog-bg, #1a1d23) 92%, rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-list,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-list {
  scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
}

html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-list::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.24);
}

html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-list::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] .ygt-tour-picker-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.36);
}

html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable,
html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable #wpwrap,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable #wpwrap {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar-thumb,
html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22);
}

html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar-thumb:hover,
html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective='dark'] body.ygt-tour-active.ygt-step-scrollable #wpwrap::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.34);
}

@media (max-width: 720px) {
  .ygt-layout {
    grid-template-columns: 1fr;
  }

  .ygt-visual {
    min-height: 180px;
    order: -1;
  }
}

/* RTL — guided tour popovers and modals */
[dir='rtl'] .ygt-popover,
:is([dir='rtl'], body.yooadmin-arabic-ui) .ygt-popover,
[dir='rtl'] .ygt-dialog,
:is([dir='rtl'], body.yooadmin-arabic-ui) .ygt-dialog {
  direction: rtl;
  text-align: right;
}

[dir='rtl'] .ygt-close,
:is([dir='rtl'], body.yooadmin-arabic-ui) .ygt-close {
  right: auto;
  left: 12px;
}

[dir='rtl'] body.ygt-tour-active.ygt-step-notifications .yp-notifications-dropdown.show,
:is([dir='rtl'], body.yooadmin-arabic-ui) body.ygt-tour-active.ygt-step-notifications .yp-notifications-dropdown.show {
  right: auto !important;
  left: var(--ygt-notif-dropdown-left, 24px) !important;
}