/*
 * Bundle website: loading skeleton (views/skeleton.xml).
 * Namespace: bw-* only (bd-* / bq-* belong to the bundle and bulk quotation pages).
 * Sizes mirror styles.css (header, .hero-fullscreen, .page-hero, .product-detail, .auth-section...).
 */

/* ---------- Colours: derived from the theme (--bundle-red / --bundle-blue in styles.css) ---------- */

:root {
    /* Hex fallbacks = #EF4725 / #0a2240 mixed with white, for browsers without color-mix() */
    --bw-sk-base: #fdebe7;           /* red 11%: blocks, lines, loading images */
    --bw-sk-shine: #fef8f6;          /* red 4% */
    --bw-sk-accent: #fcded8;         /* red 18%: titles, buttons */
    --bw-sk-accent-shine: #fef0ee;   /* red 8% */
    --bw-sk-dark: var(--bundle-blue, #0a2240);
    --bw-sk-dark-shine: #1e344f;     /* navy + 8% white */
    --bw-sk-on-dark: rgba(255, 255, 255, 0.12);
    --bw-sk-on-dark-shine: rgba(255, 255, 255, 0.24);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --bw-sk-base: color-mix(in srgb, var(--bundle-red, #ef4725) 11%, #ffffff);
        --bw-sk-shine: color-mix(in srgb, var(--bundle-red, #ef4725) 4%, #ffffff);
        --bw-sk-accent: color-mix(in srgb, var(--bundle-red, #ef4725) 18%, #ffffff);
        --bw-sk-accent-shine: color-mix(in srgb, var(--bundle-red, #ef4725) 8%, #ffffff);
        --bw-sk-dark-shine: color-mix(in srgb, var(--bundle-blue, #0a2240) 92%, #ffffff);
    }
}

/* ---------- Overlay ---------- */

.bw-skeleton {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    background-color: #ffffff;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
    /* Failsafe: reveal the page even if the skeleton script never runs */
    animation: bw-skeleton-failsafe 0.35s ease 3.5s forwards;
}

.bw-skeleton--hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes bw-skeleton-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ---------- Shimmer blocks ---------- */

.bw-sk,
img.bw-img-loading {
    background-color: var(--bw-sk-base);
    background-image: linear-gradient(90deg, var(--bw-sk-base) 25%, var(--bw-sk-shine) 50%, var(--bw-sk-base) 75%);
    background-size: 200% 100%;
    animation: bw-shimmer 1.5s ease-in-out infinite;
}

.bw-sk {
    display: block;
    border-radius: 4px;
}

/* Titles and buttons stand out a little, like the red accents of the real pages */
.bw-sk-line--title,
.bw-sk-line--display,
.bw-sk-btn,
.bw-sk-error-code {
    background-color: var(--bw-sk-accent);
    background-image: linear-gradient(90deg, var(--bw-sk-accent) 25%, var(--bw-sk-accent-shine) 50%, var(--bw-sk-accent) 75%);
}

.bw-sk.bw-sk-on-dark {
    background-color: var(--bw-sk-on-dark);
    background-image: linear-gradient(90deg, var(--bw-sk-on-dark) 25%, var(--bw-sk-on-dark-shine) 50%, var(--bw-sk-on-dark) 75%);
}

@keyframes bw-shimmer {
    from {
        background-position: 150% 0;
    }
    to {
        background-position: -50% 0;
    }
}

/* ---------- Images: shown section by section, top to bottom ---------- */

/* A loaded image waiting for the sections above it: the picture is moved out of its own
   (clipping) box so only the shimmer background shows. !important: theme rules may set
   object-position with a higher specificity. */
img.bw-img-held {
    object-position: -99999px -99999px !important;
}

img.bw-img-reveal {
    animation: bw-img-in 0.45s ease;
}

@keyframes bw-img-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ---------- Carousels: skeleton until the first visible slide's image is shown ---------- */

.owl-carousel.bw-carousel-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background-color: var(--bw-sk-base);
    background-image: linear-gradient(90deg, var(--bw-sk-base) 25%, var(--bw-sk-shine) 50%, var(--bw-sk-base) 75%);
    background-size: 200% 100%;
    animation: bw-shimmer 1.5s ease-in-out infinite;
}

/* Home hero: navy, like the skeleton hero */
.hero-slider.bw-carousel-loading::after {
    background-color: var(--bw-sk-dark);
    background-image: linear-gradient(90deg, var(--bw-sk-dark) 25%, var(--bw-sk-dark-shine) 50%, var(--bw-sk-dark) 75%);
}

/* ---------- Primitives ---------- */

.bw-sk-line {
    width: 100%;
    height: 14px;
    margin-bottom: 12px;
}

.bw-sk-line--title {
    width: 45%;
    height: 32px;
    margin-bottom: 20px;
}

.bw-sk-line--display {
    width: 100%;
    height: clamp(28px, 3.4vw, 56px);
    margin-bottom: 16px;
}

.bw-sk-w-20 { width: 20%; }
.bw-sk-w-30 { width: 30%; }
.bw-sk-w-40 { width: 40%; }
.bw-sk-w-50 { width: 50%; }
.bw-sk-w-60 { width: 60%; }
.bw-sk-w-70 { width: 70%; }
.bw-sk-w-80 { width: 80%; }
.bw-sk-w-90 { width: 90%; }
.bw-sk-w-95 { width: 95%; }

.bw-sk-mt { margin-top: 1rem; }
.bw-sk-gap { margin-bottom: 1.5rem; }
.bw-sk-gap-lg { margin-bottom: 2.5rem; }

.bw-sk-block { width: 100%; }
.bw-sk-ratio-card { aspect-ratio: 4 / 5; }
.bw-sk-ratio-product { aspect-ratio: 1.15; }
.bw-sk-ratio-gallery { aspect-ratio: 1 / 1.1; }
.bw-sk-ratio-blog { aspect-ratio: 16 / 10; }
.bw-sk-ratio-square { aspect-ratio: 1; }
.bw-sk-ratio-scene { aspect-ratio: 4 / 3; }

.bw-sk-ratio-photo {
    aspect-ratio: 16 / 10;
    margin-top: 2rem;
    border-radius: 24px;
}

.bw-sk-card {
    height: 180px;
    margin-bottom: 1.5rem;
    border-radius: 24px;
}

.bw-sk-pill {
    width: 120px;
    height: 40px;
}

.bw-sk-btn {
    width: 180px;
    height: 48px;
    border-radius: 0;
}

.bw-sk-btn--wide { width: 260px; }

.bw-sk-input { height: 48px; }
.bw-sk-textarea { height: 120px; }

.bw-sk-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ---------- Header (mirrors .navbar in styles.css) ---------- */

.bw-sk-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding-top: 40px;
}

.bw-sk-header--light { position: relative; }

.bw-sk-header .container {
    gap: 50px;
    padding-bottom: 20px;
}

.bw-sk-logo {
    width: 140px;
    height: 28px;
}

.bw-sk-nav { gap: 50px; }

.bw-sk-nav-item {
    width: 96px;
    height: 18px;
}

.bw-sk-actions { gap: 16px; }

.bw-sk-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ---------- Heroes (mirror .hero-fullscreen / .page-hero / .blog-hero) ---------- */

.bw-sk-hero {
    position: relative;
    height: max(420px, 43vw);
    max-height: 1000px;
    background-color: var(--bw-sk-dark);
}

.bw-sk-hero--tall { height: max(420px, 52.3vw); }
.bw-sk-hero--blog { height: clamp(420px, 41.4vw, 800px); }

.bw-sk-hero--full {
    height: 100vh;
    min-height: 960px;
    max-height: none;
}

.bw-sk-hero-center {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem;
    transform: translateY(-50%);
}

.bw-sk-hero-left {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

.bw-sk-hero-left > .bw-sk { max-width: 560px; }

.bw-sk-w-hero { width: min(640px, 80%); }
.bw-sk-w-hero-short { width: min(420px, 60%); }
.bw-sk-hero-center .bw-sk-btn { margin-top: 12px; }

/* ---------- Page sections ---------- */

.bw-sk-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.bw-sk-section--tight { padding-top: clamp(1.5rem, 2.5vw, 3rem); }

/* #tables.py-5 > .container.py-3 */
.bw-sk-section--listing { padding-top: 4rem; }

.bw-sk-heading {
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.bw-sk-heading .bw-sk { margin-left: auto; margin-right: auto; }

.bw-sk-filter-bar {
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.bw-sk-split-img { min-height: 420px; }

.bw-sk-about-grid {
    display: flex;
    gap: 20px;
}

.bw-sk-about-grid > div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 20px;
}

.bw-sk-about-tall { height: 360px; }
.bw-sk-about-short { height: 240px; }

.bw-sk-product {
    display: grid;
    grid-template-columns: minmax(0, 47%) minmax(0, 53%);
    gap: clamp(2rem, 4vw, 4.5rem);
    margin-top: 1.5rem;
}

.bw-sk-contact-info { padding: 5rem 3rem 5rem 0; }
.bw-sk-contact-form { padding: 5rem 0 5rem 3rem; }

.bw-sk-auth {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 52%);
    min-height: clamp(560px, 44vw, 855px);
}

.bw-sk-auth-visual {
    height: 100%;
    border-radius: 0;
}

.bw-sk-auth-panel {
    width: 100%;
    max-width: 720px;
    padding: clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 4vw, 3rem);
}

.bw-sk-error {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
    padding-bottom: clamp(3rem, 6vw, 7rem);
}

.bw-sk-error-code {
    width: min(300px, 60%);
    height: clamp(80px, 9vw, 130px);
    margin-bottom: 2rem;
}

/* ---------- Responsive (same breakpoints as styles.css) ---------- */

@media (max-width: 1399.98px) {
    .bw-sk-header { padding-top: 20px; }
}

@media (max-width: 991.98px) {
    .bw-sk-hero--full {
        height: 70vh;
        min-height: 450px;
    }

    .bw-sk-hero--blog { height: clamp(400px, 52vw, 520px); }
    .bw-sk-hero-left { padding-top: 72px; }

    .bw-sk-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .bw-sk-split-img { min-height: 320px; }
    .bw-sk-about-tall { height: 270px; }
    .bw-sk-about-short { height: 170px; }

    .bw-sk-product {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .bw-sk-product > .bw-sk-block { max-width: 460px; }

    .bw-sk-contact-info { padding: 3.5rem 0 2.5rem; }
    .bw-sk-contact-form { padding: 3rem 0 3.5rem; }

    .bw-sk-auth {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .bw-sk-auth-visual { height: clamp(200px, 34vw, 340px); }

    .bw-sk-error { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .bw-sk-hero--page,
    .bw-sk-hero--tall,
    .bw-sk-hero--banner {
        height: 40vh;
        min-height: 300px;
    }

    .bw-sk-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .bw-sk-split-img { min-height: 260px; }
    .bw-sk-line--title { width: 70%; }
}

@media (max-width: 575.98px) {
    .bw-sk-hero--full { height: 50vh; }
    .bw-sk-hero--blog { height: 420px; }
    .bw-sk-split-img { min-height: 220px; }
    .bw-sk-btn--wide { width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
    .bw-sk,
    img.bw-img-loading,
    img.bw-img-reveal,
    .owl-carousel.bw-carousel-loading::after {
        animation: none;
    }

    .bw-skeleton { transition: none; }
}