/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-u0bm24ljs4] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-u0bm24ljs4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-uv9kiyvv1q],
.components-reconnect-repeated-attempt-visible[b-uv9kiyvv1q],
.components-reconnect-failed-visible[b-uv9kiyvv1q],
.components-pause-visible[b-uv9kiyvv1q],
.components-resume-failed-visible[b-uv9kiyvv1q],
.components-rejoining-animation[b-uv9kiyvv1q] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-retrying[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-failed[b-uv9kiyvv1q],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-uv9kiyvv1q] {
    display: block;
}


#components-reconnect-modal[b-uv9kiyvv1q] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-uv9kiyvv1q 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-uv9kiyvv1q 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-uv9kiyvv1q 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-uv9kiyvv1q]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-uv9kiyvv1q 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-uv9kiyvv1q {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-uv9kiyvv1q {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-uv9kiyvv1q {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-uv9kiyvv1q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-uv9kiyvv1q] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-uv9kiyvv1q] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-uv9kiyvv1q] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-uv9kiyvv1q] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-uv9kiyvv1q] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-uv9kiyvv1q] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-uv9kiyvv1q 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-uv9kiyvv1q] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-uv9kiyvv1q {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Public/PublicWebsiteHome.razor.rz.scp.css */
/*
    Home page hero, "Trade photo" style (Website.HomeHeroStyle = TradePhoto).

    Scoped CSS ships in TradesmensWebsites.styles.css, which App.razor links by
    content hash, so these rules always arrive with the markup (custom.css is
    cached for an hour). custom.css is linked AFTER this bundle, so every override
    here wins on specificity rather than source order: Blazor appends the scope
    attribute to the last compound selector, so
    .home-page.hero-style-photo .hero-slider-layout[b-xxxx] is (0,4,0) against
    .home-page .hero-slider-layout (0,2,0) in custom.css.

    In the Classic style nothing here matches and the markup is the theme's own.
*/

/* custom.css paints a radial gradient on .hero-slider-layout. A flat primary colour
   sits under the photo instead, so a missing image degrades to a plain coloured hero. */
.home-page.hero-style-photo .hero-slider-layout[b-lt2qjlukwy] {
    background-image: none;
    background-color: var(--primary-color);
    isolation: isolate;
}

/* The photo fills the layout box. .sis-hero (overflow: hidden) with .sis-br-radius
   clips it to the rounded corners. */
.home-page.hero-style-photo .hero-photo[b-lt2qjlukwy] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.home-page.hero-style-photo .hero-photo img[b-lt2qjlukwy] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Tint on phones and tablets: a flat wash of the website's primary colour, because
   below the lg breakpoint the copy spans the full width of the hero. */
.home-page.hero-style-photo .hero-photo[b-lt2qjlukwy]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--primary-color);
    opacity: 0.72;
}

/* The content paints above the photo. */
.home-page.hero-style-photo .hero-swiper[b-lt2qjlukwy] {
    position: relative;
    z-index: 1;
}

/* In the classic style the cut-out image stands on the hero's bottom edge and the cards
   line up with it. Without the image column the copy column is the row's last child, so
   the theme's ".row > div:last-child .sisf-e-inner { margin-bottom: 0 }" zeroes the
   cards' 80px margin and they would sit on the edge. The padding goes on
   .sisf-hero-bottom because .hero-slide carries Bootstrap's pb-0 (!important). */
@media (min-width: 768px) {
    .home-page.hero-style-photo .sisf-hero-bottom[b-lt2qjlukwy] {
        padding-bottom: 60px;
    }
}

@media (min-width: 992px) {
    /* Desktop: col-lg-7 keeps the copy in the left 58% of the hero. The flat wash drops
       to 0.45 and a second layer ramps the left side back up, so the combined tint is
       about 0.85 over the copy, 0.75 at the column edge and 0.45 at the right edge.
       The dark band at the top sits under the absolute header, whose links are white. */
    .home-page.hero-style-photo .hero-photo[b-lt2qjlukwy]::before {
        opacity: 0.45;
    }

    .home-page.hero-style-photo .hero-photo[b-lt2qjlukwy]::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.72;
        background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0, rgba(0, 0, 0, 0) 220px),
            linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 45%, transparent 100%);
    }
}
/* /Components/WhatsAppButton.razor.rz.scp.css */
/*
    Scoped CSS ships in TradesmensWebsites.styles.css, which App.razor links by
    content hash, so these styles always arrive with the markup (custom.css is
    cached for an hour). Bottom-left, because the theme's back-to-top button
    sits bottom-right.
*/
.sis-whatsapp-button[b-37tpunlugw] {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 998;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #25D366; /* WhatsApp green */
    color: #fff;
    font-size: 32px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.sis-whatsapp-button:hover[b-37tpunlugw],
.sis-whatsapp-button:focus-visible[b-37tpunlugw] {
    color: #fff;
    transform: scale(1.07);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

.sis-whatsapp-button:focus-visible[b-37tpunlugw] {
    outline: 3px solid var(--primary-color, #073123);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .sis-whatsapp-button[b-37tpunlugw] {
        left: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sis-whatsapp-button[b-37tpunlugw],
    .sis-whatsapp-button:hover[b-37tpunlugw],
    .sis-whatsapp-button:focus-visible[b-37tpunlugw] {
        transition: none;
        transform: none;
    }
}

@media print {
    .sis-whatsapp-button[b-37tpunlugw] {
        display: none;
    }
}