/* ──────────────────────────────────────────────────────────────────────────
   Suporte interativo (tour guiado) — botão de ajuda na sidebar + popover Driver.js.
   Usa as cores de marca Predyra (navy + acento verde). Ver guided-tour.js.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Botão de ajuda no rodapé da sidebar ── */
.pdr-tour-help {
    position: relative;
    padding: 0 .75rem .5rem;
}

.pdr-tour-help-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid transparent;
    border-radius: .625rem;
    background: transparent;
    color: var(--muted-foreground);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pdr-tour-help-btn:hover {
    background: var(--predyra-green-soft, rgba(25, 221, 144, .12));
    color: var(--predyra-green-ink, #0a8f5b);
    border-color: var(--predyra-green-border, rgba(25, 221, 144, .35));
}

.pdr-tour-help-btn svg { flex-shrink: 0; }
.pdr-tour-help-label { line-height: 1; }

/* ── Popover (abre para cima) ── */
.pdr-tour-help-menu {
    position: absolute;
    bottom: calc(100% - .25rem);
    left: .75rem;
    right: .75rem;
    z-index: 60;
    padding: .375rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--background, #fff);
    box-shadow: 0 18px 40px -12px rgba(5, 11, 63, .35);
    animation: pdrTourMenuIn .14s ease-out;
}

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

.pdr-tour-help-header {
    padding: .375rem .55rem .25rem;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-foreground);
}

.pdr-tour-help-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .55rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--foreground);
    font-size: .8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.pdr-tour-help-item:hover {
    background: var(--predyra-green-soft, rgba(25, 221, 144, .12));
    color: var(--predyra-green-ink, #0a8f5b);
}

.pdr-tour-help-item svg { flex-shrink: 0; color: var(--predyra-green-ink, #0a8f5b); }
.pdr-tour-help-optout svg { color: var(--muted-foreground); }
.pdr-tour-help-optout { color: var(--muted-foreground); }

.pdr-tour-help-sep {
    height: 1px;
    margin: .3rem .25rem;
    background: var(--border);
}

/* ── Popover do Driver.js com a cara do Predyra ── */
.driver-popover.predyra-tour {
    background: var(--background, #fff);
    color: var(--foreground, #0b123f);
    border-radius: .85rem;
    box-shadow: 0 24px 60px -12px rgba(5, 11, 63, .45);
    max-width: 320px;
}

.driver-popover.predyra-tour .driver-popover-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--predyra-navy-2, #0b123f);
}

.driver-popover.predyra-tour .driver-popover-description {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--secondary-foreground, #4b5563);
}

.driver-popover.predyra-tour .driver-popover-progress-text {
    font-size: .7rem;
    color: var(--muted-foreground);
}

.driver-popover.predyra-tour .driver-popover-navigation-btns button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .3rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--foreground);
    text-shadow: none;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.driver-popover.predyra-tour .driver-popover-navigation-btns button:hover {
    background: var(--predyra-green-soft, rgba(25, 221, 144, .12));
    border-color: var(--predyra-green-border, rgba(25, 221, 144, .35));
    color: var(--predyra-green-ink, #0a8f5b);
}

/* Botão "Próximo/Concluir" em destaque (verde de marca) */
.driver-popover.predyra-tour .driver-popover-next-btn {
    background: var(--predyra-green, #19dd90);
    border-color: var(--predyra-green, #19dd90);
    color: var(--predyra-navy, #050b3f);
}

.driver-popover.predyra-tour .driver-popover-next-btn:hover {
    background: #14c47f;
    border-color: #14c47f;
    color: var(--predyra-navy, #050b3f);
}

.driver-popover.predyra-tour .driver-popover-close-btn {
    color: var(--muted-foreground);
}

/* Setas do popover acompanham o fundo claro */
.driver-popover.predyra-tour .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--background, #fff); }
.driver-popover.predyra-tour .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--background, #fff); }
.driver-popover.predyra-tour .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--background, #fff); }
.driver-popover.predyra-tour .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--background, #fff); }