/* ========================================
   demo-tour.css

   Interactive guided tour — minimalist orange accent theme.
   Orange tone matches var(--accent) = #E37222 (CPEE highlight colour).
   ======================================== */

/* ── Confirmation dialog ── */
.tour-confirm-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 10100;
   display: flex;
   align-items: center;
   justify-content: center;
   animation: tourFadeIn 0.18s ease;
}

.tour-confirm-dialog {
   background: var(--surface-color);
   border-top: 3px solid var(--accent);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   padding: var(--spacing-lg);
   max-width: 400px;
   width: 90%;
   animation: tourScaleIn 0.18s ease;
}

.tour-confirm-dialog h2 {
   margin: 0 0 var(--spacing-sm);
   font-size: var(--font-size-md);
   font-weight: 700;
   color: var(--text-primary);
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
}

.tour-confirm-dialog h2 svg {
   color: var(--accent);
   flex-shrink: 0;
}

.tour-confirm-dialog p {
   margin: 0 0 var(--spacing-lg);
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
   line-height: 1.6;
}

.tour-confirm-actions {
   display: flex;
   gap: var(--spacing-sm);
   justify-content: flex-end;
}

/* ── Full-viewport click-blocker ── */
.tour-overlay {
   position: fixed;
   inset: 0;
   z-index: 9990;
   pointer-events: all;
   background: transparent;
}

/* ── Spotlight cutout ──
   Huge box-shadow creates the dimmed backdrop outside this element.     */
.tour-spotlight {
   position: fixed;
   z-index: 9995;
   pointer-events: none;
   border-radius: var(--border-radius);
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
   transition: top 0.25s ease, left 0.25s ease,
               width 0.25s ease, height 0.25s ease,
               opacity 0.2s ease;
}

.tour-spotlight.tour-spotlight--hidden {
   opacity: 0;
   top: 50% !important;
   left: 50% !important;
   width: 0 !important;
   height: 0 !important;
}

/* ── Popover card ── */
.tour-popover {
   position: fixed;
   z-index: 10000;
   background: var(--surface-color);
   border: 1px solid var(--border-color);
   border-top: 3px solid var(--accent);
   border-radius: var(--border-radius-lg);
   box-shadow: var(--shadow-md);
   max-width: 340px;
   min-width: 260px;
   pointer-events: all;
   animation: tourPopoverIn 0.16s ease;
}

.tour-popover-inner {
   padding: var(--spacing-md) var(--spacing-lg);
}

.tour-popover-header {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
   margin-bottom: var(--spacing-xs);
}

.tour-popover-title {
   flex: 1;
   margin: 0;
   font-size: 0.82rem;
   font-weight: 700;
   color: var(--accent);
   line-height: 1.3;
   text-transform: uppercase;
   letter-spacing: 0.4px;
}

.tour-popover-close {
   background: none;
   border: none;
   cursor: pointer;
   color: var(--text-secondary);
   padding: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius-sm);
   flex-shrink: 0;
   opacity: 0.7;
}

.tour-popover-close:hover {
   opacity: 1;
   color: var(--text-primary);
}

.tour-popover-body {
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
   line-height: 1.6;
   margin: 0;
}

.tour-popover-body strong {
   color: var(--text-primary);
}

.tour-popover-body code {
   background: var(--background-color);
   border-radius: 3px;
   padding: 1px 5px;
   font-family: var(--font-mono);
   font-size: 0.85em;
   color: var(--accent);
}

.tour-popover-body .tour-error-label {
   display: inline-block;
   background: var(--accent);
   color: #fff;
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 2px 7px;
   border-radius: 10px;
   vertical-align: middle;
   margin-left: 4px;
}

/* ── Waiting indicator ── */
.tour-wait-banner {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   margin-top: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--background-color);
   border-radius: var(--border-radius);
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
   border-left: 2px solid var(--accent);
}

.tour-spinner {
   width: 12px;
   height: 12px;
   border: 2px solid var(--border-color);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: tourSpin 0.7s linear infinite;
   flex-shrink: 0;
}

/* ── Footer ── */
.tour-popover-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-lg);
   border-top: 1px solid var(--border-color);
}

.tour-step-counter {
   font-size: 0.75rem;
   color: var(--text-secondary);
   font-variant-numeric: tabular-nums;
}

.tour-footer-btns {
   display: flex;
   gap: var(--spacing-xs);
}

/* Tour-specific button overrides — orange primary */
.tour-btn-primary {
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: var(--border-radius);
   padding: 5px 14px;
   font-size: var(--font-size-sm);
   font-family: var(--font-sans);
   font-weight: 600;
   cursor: pointer;
   transition: filter 0.15s;
}

.tour-btn-primary:hover:not(:disabled) {
   filter: brightness(1.1);
}

.tour-btn-primary:disabled {
   opacity: 0.45;
   cursor: not-allowed;
}

.tour-btn-secondary {
   background: transparent;
   color: var(--text-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: 5px 14px;
   font-size: var(--font-size-sm);
   font-family: var(--font-sans);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
}

.tour-btn-secondary:hover {
   background: var(--hover-bg);
   color: var(--text-primary);
}

/* ── Arrow indicator ── */
.tour-popover-arrow {
   position: absolute;
   width: 9px;
   height: 9px;
   background: var(--surface-color);
   border: 1px solid var(--border-color);
   transform: rotate(45deg);
}

.tour-popover[data-arrow="bottom"] .tour-popover-arrow {
   top: -5px;
   left: 50%;
   margin-left: -5px;
   border-bottom: none;
   border-right: none;
   border-top-color: var(--accent);
}

.tour-popover[data-arrow="top"] .tour-popover-arrow {
   bottom: -5px;
   left: 50%;
   margin-left: -5px;
   border-top: none;
   border-left: none;
}

.tour-popover[data-arrow="right"] .tour-popover-arrow {
   left: -5px;
   top: 30px;
   border-right: none;
   border-bottom: none;
   transform: rotate(-45deg);
}

.tour-popover[data-arrow="left"] .tour-popover-arrow {
   right: -5px;
   top: 30px;
   border-left: none;
   border-top: none;
   transform: rotate(-45deg);
}

.tour-popover[data-arrow="none"] .tour-popover-arrow {
   display: none;
}

/* ── Tour button in header ── */
#tour-start-btn {
   color: var(--accent);
   border-color: var(--accent);
}

#tour-start-btn:hover {
   background: rgba(227, 114, 34, 0.1);
   border-color: var(--accent);
   color: var(--accent);
}

/* ── Animations ── */
@keyframes tourFadeIn {
   from { opacity: 0; }
   to   { opacity: 1; }
}

@keyframes tourScaleIn {
   from { opacity: 0; transform: scale(0.96); }
   to   { opacity: 1; transform: scale(1); }
}

@keyframes tourPopoverIn {
   from { opacity: 0; transform: translateY(5px); }
   to   { opacity: 1; transform: translateY(0); }
}

@keyframes tourSpin {
   to { transform: rotate(360deg); }
}

/* Pulsing outline removed — highlighted zones have no border */
.tour-spotlight--pulse {}

/* ── Action callout — used for "navigate to …" instructions ── */
.tour-action-hint {
    display: block;
    margin-top: var(--spacing-sm);
    padding: 6px var(--spacing-sm);
    background: rgba(227, 114, 34, 0.12);
    border-left: 3px solid var(--accent);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-weight: 600;
}

.tour-action-hint--success {
    background: var(--alert-success-bg);
    border-left-color: var(--alert-success-border);
    color: var(--alert-success-text);
}