/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Failproof Skeleton - cosmetic placeholders only
 *
 * Stepper sizing comes from stepper.css (.fp-stepper-shell / -layer, header,
 * main, footer, nav). Prefer a shared .fp-stepper-shell with layer children so
 * swapping skeleton ↔ live cannot change the card box. Do not re-declare
 * flex heights here.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.fp-skeleton
{
    pointer-events: none;
}

.fp-skeleton .placeholder
{
    background-color: #dee2e6;
    border-radius: 0.25rem;
}

.fp-skeleton .fp-stepper-nav-btn
{
    cursor: default;
}

.fp-skeleton .fp-stepper-nav-icon
{
    background-color: #cfd4da !important;
    color: transparent !important;
}

/*
 * Keep real .fp-stepper-nav-label font metrics (line-height/size) so the header
 * band matches the live stepper - a forced short height shrank the head and
 * made the body flex taller.
 */
.fp-skeleton .fp-stepper-nav-label
{
    position: relative;
    color: transparent !important;
    user-select: none;
}

.fp-skeleton .fp-stepper-nav-label::after
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0.7em;
    transform: translateY(-50%);
    background-color: #cfd4da;
    border-radius: 0.2rem;
}

.fp-skeleton .fp-stepper-nav-item:not(:first-child) .fp-stepper-nav-btn::before,
.fp-skeleton .fp-stepper-nav-item:not(:last-child) .fp-stepper-nav-btn::after
{
    background-color: #dee2e6;
}

/* Same box as live .btn.btn-primary - muted chip (keep disabled opacity at 1) */
.fp-skeleton-btn,
.fp-skeleton-btn:disabled
{
    background-color: #cfd4da !important;
    border-color: #cfd4da !important;
    box-shadow: none !important;
    color: transparent !important;
    pointer-events: none;
    opacity: 1 !important;
    min-width: 6.75rem; /* ~"Continue" */
}

/* Disabled nav heads must keep full live padding / opacity for height match */
.fp-skeleton .fp-stepper-nav-btn:disabled
{
    opacity: 1;
    pointer-events: none;
}

.fp-skeleton-panel-lines .placeholder
{
    display: block;
}