/* Always-visible floating footer for survey navigation */
.survey-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030; /* above normal content */
}

/* Add breathing room so content doesn’t sit under the footer */
.survey-footer-spacer {
    height: 84px; /* adjust if you change padding/button size */
}

/* Optional: subtle “glass” feel while scrolling (safe with Tabler) */
.survey-footer {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
}

/* If you support dark mode, make it behave */
[data-bs-theme="dark"] .survey-footer {
    background-color: rgba(24, 36, 51, 0.92);
}

/* Missing-question highlight (card border + subtle background) */
[data-qcard].survey-missing {
    border: 1px solid rgba(214, 57, 57, 0.55); /* Tabler-ish danger */
    box-shadow: 0 0 0 2px rgba(214, 57, 57, 0.10);
}

[data-qcard].survey-missing .card-body {
    background: rgba(214, 57, 57, 0.03);
}

/* Per-question inline error label (hidden by default) */
[data-qerror] {
    display: none;
}

[data-qerror].survey-qerror-show {
    display: block;
    margin-top: 0.5rem;
    color: #d63939;
    font-size: 0.875rem;
}

/* Fixed “toast/tooltip” popup above the floating footer */
.survey-nav-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(84px + 16px); /* default footer height + spacing */
    width: min(560px, calc(100vw - 32px));
    z-index: 1100; /* above footer */
}

@keyframes survey-shake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-6px); }
    30%  { transform: translateX(6px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(4px); }
    75%  { transform: translateX(-2px); }
    90%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

#btn-next.survey-shake {
    animation: survey-shake 320ms ease-in-out;
}