/* ================================================================
   BPI Skeleton / Placeholder System
   ================================================================ */

/* ── Bootstrap placeholder color overrides ─────────────────────── */
.placeholder {
    background-color: #d1d9e6 !important;
    border-radius: 6px;
    opacity: 1 !important;
}
.bpi-dark .placeholder {
    background-color: #2d3f55 !important;
}

/* ── Skeleton wrapper ── */
.bpi-skeleton-block {
    display: none;
}
.bpi-skeleton-block.bpi-sk-visible {
    display: block;
}

/* ── Common skeleton pieces ── */
.bpi-sk-img {
    background-color: #d1d9e6;
    border-radius: 12px;
    width: 100%;
}
.bpi-dark .bpi-sk-img {
    background-color: #2d3f55;
}
.bpi-sk-img.bpi-sk-square  { aspect-ratio: 1/1; }
.bpi-sk-img.bpi-sk-wide    { aspect-ratio: 4/3; }
.bpi-sk-img.bpi-sk-hero    { height: 520px; border-radius: 0; }
.bpi-sk-img.bpi-sk-thumb   { height: 260px; border-radius: 10px; }
.bpi-sk-img.bpi-sk-avatar  { width: 100%; aspect-ratio: 3/4; border-radius: 12px; }
.bpi-sk-img.bpi-sk-icon    { width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; }

/* ── Skeleton card shell ── */
.bpi-sk-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    height: 100%;
}
.bpi-dark .bpi-sk-card {
    background: #1e293b;
    border-color: #334155;
}

/* ── Lines ── */
.bpi-sk-line {
    height: 12px;
    background-color: #d1d9e6;
    border-radius: 6px;
    margin-bottom: 10px;
}
.bpi-dark .bpi-sk-line { background-color: #2d3f55; }

.bpi-sk-line.sm  { height: 10px; }
.bpi-sk-line.md  { height: 14px; }
.bpi-sk-line.lg  { height: 20px; }
.bpi-sk-line.xl  { height: 28px; }
.bpi-sk-line.xxl { height: 48px; }

.bpi-sk-line.w-30  { width: 30%; }
.bpi-sk-line.w-40  { width: 40%; }
.bpi-sk-line.w-50  { width: 50%; }
.bpi-sk-line.w-60  { width: 60%; }
.bpi-sk-line.w-70  { width: 70%; }
.bpi-sk-line.w-80  { width: 80%; }
.bpi-sk-line.w-90  { width: 90%; }
.bpi-sk-line.w-100 { width: 100%; }

/* ── Pill/badge ── */
.bpi-sk-pill {
    height: 28px; width: 90px;
    background-color: #d1d9e6;
    border-radius: 99px;
    display: inline-block;
    margin-bottom: 14px;
}
.bpi-dark .bpi-sk-pill { background-color: #2d3f55; }

/* ── Button stub ── */
.bpi-sk-btn {
    height: 44px;
    background-color: #d1d9e6;
    border-radius: 10px;
    margin-top: 16px;
}
.bpi-dark .bpi-sk-btn { background-color: #2d3f55; }

/* ── Section header skeleton ── */
.bpi-sk-section-header {
    margin-bottom: 40px;
}

/* ── Service item skeleton (icon left + text right) ── */
.bpi-sk-feature {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 20px; border-radius: 14px;
    background: #fff; border: 1.5px solid #e2e8f0;
    margin-bottom: 16px;
}
.bpi-dark .bpi-sk-feature {
    background: #1e293b; border-color: #334155;
}
.bpi-sk-feature-text { flex: 1; }

/* ── Team card skeleton ── */
.bpi-sk-team-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #e2e8f0;
}
.bpi-dark .bpi-sk-team-card {
    background: #1e293b; border-color: #334155;
}
.bpi-sk-team-body { padding: 16px; }
.bpi-sk-skills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bpi-sk-skill-pill {
    height: 24px; width: 60px;
    background-color: #d1d9e6; border-radius: 99px;
}
.bpi-dark .bpi-sk-skill-pill { background-color: #2d3f55; }

/* ── Product card skeleton ── */
.bpi-sk-product-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #e2e8f0;
}
.bpi-dark .bpi-sk-product-card {
    background: #1e293b; border-color: #334155;
}
.bpi-sk-product-body { padding: 18px; }

/* ── Pricing card skeleton ── */
.bpi-sk-price-card {
    border-radius: 22px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    padding: 32px;
}
.bpi-dark .bpi-sk-price-card {
    background: #1e293b; border-color: #334155;
}
.bpi-sk-price-amount {
    height: 56px; width: 45%;
    background-color: #d1d9e6;
    border-radius: 8px;
    margin: 16px 0;
}
.bpi-dark .bpi-sk-price-amount { background-color: #2d3f55; }
.bpi-sk-feature-item {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 10px;
}
.bpi-sk-check {
    width: 20px; height: 20px; flex-shrink: 0;
    background-color: #d1d9e6;
    border-radius: 50%;
}
.bpi-dark .bpi-sk-check { background-color: #2d3f55; }

/* ── Contact info skeleton ── */
.bpi-sk-contact-row {
    display: flex; gap: 12px; align-items: flex-start;
    margin-bottom: 18px;
}
.bpi-sk-contact-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    background-color: #d1d9e6; border-radius: 10px;
}
.bpi-dark .bpi-sk-contact-icon { background-color: #2d3f55; }

/* ── Smooth pulse animation (Bootstrap placeholder-glow uses this) ── */
@keyframes bpi-pulse {
    50% { opacity: .4; }
}
.bpi-sk-pulse {
    animation: bpi-pulse 1.5s ease-in-out infinite;
}

/* ================================================================
   PRELOAD BAR — thin top progress bar for light pages
   ================================================================ */
#bpi-preload-bar {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    background: rgba(48,111,193,.12);
    transition: opacity .35s ease;
}
.bpi-preload-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #306FC1, #7ab3f5, #306FC1);
    background-size: 200% 100%;
    border-radius: 0 3px 3px 0;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    animation: bpi-shimmer-bar 1.4s linear infinite;
}
@keyframes bpi-shimmer-bar {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.bpi-dark #bpi-preload-bar { background: rgba(48,111,193,.2); }

/* ── Transition: fade real content in ── */
[data-bpi-skeleton-target] {
    transition: opacity .35s ease;
}
[data-bpi-skeleton-target].bpi-sk-hidden {
    opacity: 0;
    pointer-events: none;
}