/* variables.css komt binnen via de tamrank-variables-late dependency (zie register_common_styles). */

/* ========================================
   TOUR — Cross-page PRO feature tour
   ======================================== */

/* ── Backdrop ───────────────────────────────────────────── */

.tr-tour__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 999990;
    animation: tr-tour-fade-in 0.2s ease;
}

@keyframes tr-tour-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Highlighted element ────────────────────────────────── */

.tr-tour__highlighted {
    position: relative;
    z-index: 999991 !important;
    border-radius: var(--tr-radius-lg);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25), 0 0 0 9999px rgba(15, 23, 42, 0.45);
}

/* An ancestor that opens its own stacking context traps the highlighted element
   under the backdrop however high its z-index — the block editor's meta-box
   drawer is one. Such ancestors are lifted for the duration of the step;
   cleanup() takes the classes off again. */

.tr-tour__lifted {
    z-index: 999991 !important;
}

.tr-tour__lifted--static {
    position: relative !important;
}

/* ── Pulse ring ─────────────────────────────────────────── */

.tr-tour__pulse {
    position: fixed;
    z-index: 999991;
    border-radius: var(--tr-radius-lg);
    border: 2px solid var(--tr-color-primary);
    pointer-events: none;
    animation: tr-tour-pulse 2s ease-in-out infinite;
}

@keyframes tr-tour-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 0;   transform: scale(1.04); }
}

/* ── Tooltip (anchored to element) ──────────────────────── */

.tr-tour__tooltip {
    position: fixed;
    z-index: 999999;
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-xl);
    padding: var(--tr-space-6);
    max-width: 360px;
    width: max-content;
    box-shadow: var(--tr-shadow-xl);
    font-family: var(--tr-font-family);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.tr-tour__tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tr-tour__tooltip[data-position="top"] {
    transform: translateY(-8px);
}

.tr-tour__tooltip[data-position="top"].is-visible {
    transform: translateY(0);
}

/* ── Card (centered floating) ───────────────────────────── */

.tr-tour__card {
    position: fixed;
    z-index: 999999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-xl);
    padding: var(--tr-space-8);
    max-width: 440px;
    width: calc(100% - 48px);
    box-shadow: var(--tr-shadow-xl);
    font-family: var(--tr-font-family);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tr-tour__card.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ── Shared inner elements ──────────────────────────────── */

.tr-tour__tooltip-header {
    margin-bottom: var(--tr-space-3);
}

.tr-tour__counter {
    font-size: var(--tr-text-xs);
    font-weight: var(--tr-font-medium);
    color: var(--tr-color-primary);
    letter-spacing: 0.02em;
}

.tr-tour__title {
    font-size: var(--tr-text-base);
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-900);
    margin: 0 0 var(--tr-space-2) 0;
    letter-spacing: -0.01em;
}

.tr-tour__text {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    line-height: var(--tr-leading-relaxed);
    margin: 0 0 var(--tr-space-5) 0;
}

/* ── Actions row ────────────────────────────────────────── */

.tr-tour__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-3);
    padding-top: var(--tr-space-4);
    border-top: 1px solid var(--tr-color-surface);
}

.tr-tour__btn-next {
    display: inline-flex;
    align-items: center;
    gap: var(--tr-space-1);
    padding: var(--tr-space-2) var(--tr-space-5);
    background: var(--tr-color-primary);
    color: var(--tr-color-white);
    border: none;
    border-radius: var(--tr-radius-lg);
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    cursor: pointer;
    transition: background var(--tr-transition-fast);
    line-height: var(--tr-leading-normal);
}

.tr-tour__btn-next:hover {
    background: var(--tr-color-primary-hover);
}

.tr-tour__btn-skip {
    background: none;
    border: none;
    color: var(--tr-color-slate-400);
    font-family: var(--tr-font-family);
    font-size: var(--tr-text-sm);
    cursor: pointer;
    padding: var(--tr-space-2) var(--tr-space-3);
    border-radius: var(--tr-radius-md);
    transition: color var(--tr-transition-fast), background var(--tr-transition-fast);
    line-height: var(--tr-leading-normal);
}

.tr-tour__btn-skip:hover {
    color: var(--tr-color-slate-600);
    background: var(--tr-color-surface);
}

/* A step that names its own skip label is making skipping a genuine offer —
   the FREE welcome card says "Skip the tour" out loud — so that button reads
   as a button instead of as the faint get-out on a numbered step. */
.tr-tour__btn-skip--stated {
    color: var(--tr-color-slate-600);
    border: 1px solid var(--tr-color-slate-200);
    font-weight: var(--tr-font-medium);
    padding: var(--tr-space-2) var(--tr-space-4);
}

.tr-tour__btn-skip--stated:hover {
    color: var(--tr-color-slate-800);
    border-color: var(--tr-color-slate-300);
}

/* ── Features list (card step) ──────────────────────────── */

.tr-tour__features {
    list-style: none;
    margin: 0 0 var(--tr-space-5) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-4);
}

.tr-tour__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-3);
}

.tr-tour__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--tr-color-primary-light);
    border-radius: var(--tr-radius-md);
    color: var(--tr-color-primary);
}

.tr-tour__feature-icon svg {
    width: 18px;
    height: 18px;
}

.tr-tour__feature-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.tr-tour__feature-body strong {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-800);
}

.tr-tour__feature-body span {
    font-size: var(--tr-text-xs);
    color: var(--tr-color-slate-500);
    line-height: var(--tr-leading-relaxed);
}
