/* /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/SitePreviewBanner.razor.rz.scp.css */
/*
    Scoped CSS ships in TradesmensWebsites.styles.css, which App.razor links by content
    hash, so the bar always arrives styled (custom.css is cached for an hour). The rules
    that lift the WhatsApp and back-to-top buttons above the bar are in custom.css
    (body:has(.sis-site-preview-bar) ...), because scoped CSS cannot reach them.

    z-index 90 keeps the bar above the page content (sections use 1 to 5) but under the
    header and the open phone menu (100), so a long menu covers the bar instead of being
    cut off by it, and under the WhatsApp (998) and back-to-top (999) buttons and the
    preloader (1000).
*/
.sis-site-preview-bar[b-rbl6fcgm54] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-height: 52px;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background-color: #073123;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

.sis-site-preview-pill[b-rbl6fcgm54] {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: #EBBB0D;
    color: #073123;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sis-site-preview-text[b-rbl6fcgm54] {
    flex: 1 1 260px;
    min-width: 0;
}

.sis-site-preview-actions[b-rbl6fcgm54] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.sis-site-preview-button[b-rbl6fcgm54] {
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.sis-site-preview-button:hover[b-rbl6fcgm54],
.sis-site-preview-button:focus-visible[b-rbl6fcgm54] {
    background-color: #EBBB0D;
    border-color: #EBBB0D;
    color: #073123;
    outline: none;
}

@media (max-width: 767.98px) {
    .sis-site-preview-bar[b-rbl6fcgm54] {
        gap: 6px 10px;
        font-size: 13px;
    }

    /* The open phone menu is a full-height panel inside the header (z-index 5), so the
       bar would otherwise cover its last rows; script.js sets the body class. */
    body.mobile-menu-open .sis-site-preview-bar[b-rbl6fcgm54] {
        display: none;
    }

    .sis-site-preview-actions[b-rbl6fcgm54] {
        width: 100%;
        margin-left: 0;
    }

    .sis-site-preview-button[b-rbl6fcgm54] {
        flex: 1 1 0;
        min-height: 38px;
    }
}

@media print {
    .sis-site-preview-bar[b-rbl6fcgm54] {
        display: none;
    }
}
/* /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;
    }
}