/* Site-wide rules that used to be inline <style> blocks in Views/Shared/_Layout.cshtml.
   Linked after the theme stylesheets in the layout head. */

/* Emoji images and the active menu link */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

li.active a {
    background-color: #2b4d95;
}

/* WordPress block editor theme styles */
#start-resizable-editor-section {
    display: none
}

.wp-block-audio figcaption {
    color: #555;
    font-size: 13px;
    text-align: center
}

.is-dark-theme .wp-block-audio figcaption {
    color: hsla(0,0%,100%,.65)
}

.wp-block-code {
    font-family: Menlo,Consolas,monaco,monospace;
    color: #1e1e1e;
    padding: .8em 1em;
    border: 1px solid #ddd;
    border-radius: 4px
}

.wp-block-embed figcaption {
    color: #555;
    font-size: 13px;
    text-align: center
}

.is-dark-theme .wp-block-embed figcaption {
    color: hsla(0,0%,100%,.65)
}

.blocks-gallery-caption {
    color: #555;
    font-size: 13px;
    text-align: center
}

.is-dark-theme .blocks-gallery-caption {
    color: hsla(0,0%,100%,.65)
}

.wp-block-image figcaption {
    color: #555;
    font-size: 13px;
    text-align: center
}

.is-dark-theme .wp-block-image figcaption {
    color: hsla(0,0%,100%,.65)
}

.wp-block-pullquote {
    border-top: 4px solid;
    border-bottom: 4px solid;
    margin-bottom: 1.75em;
    color: currentColor
}

    .wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer {
        color: currentColor;
        text-transform: uppercase;
        font-size: .8125em;
        font-style: normal
    }

.wp-block-quote {
    border-left: .25em solid;
    margin: 0 0 1.75em;
    padding-left: 1em
}

    .wp-block-quote cite, .wp-block-quote footer {
        color: currentColor;
        font-size: .8125em;
        position: relative;
        font-style: normal
    }

    .wp-block-quote.has-text-align-right {
        border-left: none;
        border-right: .25em solid;
        padding-left: 0;
        padding-right: 1em
    }

    .wp-block-quote.has-text-align-center {
        border: none;
        padding-left: 0
    }

    .wp-block-quote.is-large, .wp-block-quote.is-style-large {
        border: none
    }

.wp-block-search .wp-block-search__label {
    font-weight: 700
}

.wp-block-group.has-background {
    padding: 1.25em 2.375em;
    margin-top: 0;
    margin-bottom: 0
}

.wp-block-separator {
    border: none;
    border-bottom: 2px solid;
    margin-left: auto;
    margin-right: auto;
    opacity: .4
}

    .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
        width: 100px
    }

    .wp-block-separator.has-background:not(.is-style-dots) {
        border-bottom: none;
        height: 1px
    }

    .wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
        height: 2px
    }

.wp-block-table thead {
    border-bottom: 3px solid
}

.wp-block-table tfoot {
    border-top: 3px solid
}

.wp-block-table td, .wp-block-table th {
    padding: .5em;
    border: 1px solid;
    word-break: normal
}

.wp-block-table figcaption {
    color: #555;
    font-size: 13px;
    text-align: center
}

.is-dark-theme .wp-block-table figcaption {
    color: hsla(0,0%,100%,.65)
}

.wp-block-video figcaption {
    color: #555;
    font-size: 13px;
    text-align: center
}

.is-dark-theme .wp-block-video figcaption {
    color: hsla(0,0%,100%,.65)
}

.wp-block-template-part.has-background {
    padding: 1.25em 2.375em;
    margin-top: 0;
    margin-bottom: 0
}

#end-resizable-editor-section {
    display: none
}

/* WooCommerce: required-field marker */
.woocommerce form .form-row .required {
    visibility: visible;
}

/* WhatsApp floating launcher (additional to LiveChat) and back-to-top position */
/* LiveChat's minimized bubble is 60px, 8px from the right and 16px from the bottom.
   LiveChat's transparent container is 84px wide, so right: 88px keeps this button clear of it (20px visible gap), and z-index stays just below LiveChat's
   (2147483639) so an opened LiveChat window always covers it. */
.whatsapp-floating-button {
    align-items: center;
    background-color: #25d366;
    border-radius: 50%;
    bottom: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
    color: #fff;
    display: flex;
    font-size: 32px;
    height: 60px;
    justify-content: center;
    position: fixed;
    right: 88px;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    width: 60px;
    z-index: 2147483638;
}

.whatsapp-floating-button:hover,
.whatsapp-floating-button:focus-visible {
    background-color: #1ebe5d;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.whatsapp-floating-button:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.45);
    outline-offset: 3px;
}

/* Back-to-top arrow (.click-top from _SupportModel, 15x19px; theme default right: 5rem; bottom: 1.5rem)
   would sit under the WhatsApp button, so move it left of the floating buttons.
   Desktop: WhatsApp spans right 88-148px, so right: 164px leaves a 16px gap;
   bottom: 36px centres the arrow on the buttons (centre 46px from the bottom). */
.click-top {
    bottom: 36px;
    right: 164px;
}

/* Mobile: stack WhatsApp above the LiveChat bubble, sharing its 8px right edge.
   LiveChat's transparent container is 84px tall from the bottom, so bottom: 88px keeps
   this button clear of it (12px visible gap above the bubble, whose top is at 76px). */
@media (max-width: 768px) {
    .whatsapp-floating-button {
        bottom: 88px;
        right: 8px;
    }

    /* Arrow left of the support-chat bubble: LiveChat's container covers right 0-84px,
       so right: 88px keeps it clear (20px visible gap from the bubble). */
    .click-top {
        bottom: 36px;
        right: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-floating-button,
    .whatsapp-floating-button:hover,
    .whatsapp-floating-button:focus-visible {
        transform: none;
        transition: none;
    }
}

/* Full-screen loader (.page-loader.text-fill-loader, in most views): hidden from the start so the page shows as soon as
   it is drawn. script.js used to hide it only after every script had loaded, which held the whole page back.
   Scripts that show it during checkout/form actions set an inline display (block/fadeIn/show), which overrides this. */
.page-loader.text-fill-loader {
    display: none;
}

/* Skeleton shimmer behind images and videos until they have loaded. It never delays the page: it is only a
   background, and each image/video drops it (.figg-loaded) as soon as it arrives. html.figg-skel and .figg-loaded
   are set by the small script at the top of _Layout; without JavaScript nothing changes.
   :where() keeps the specificity at zero, so any image the theme gives its own background keeps it. */
html.figg-skel :where(img:not(.figg-loaded), video:not(.figg-loaded)) {
    background-color: #eef0f4;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .65) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: figg-skel 1.4s ease-in-out infinite;
}

@keyframes figg-skel {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.figg-skel :where(img:not(.figg-loaded), video:not(.figg-loaded)) {
        animation: none;
    }
}

/* Home page images and videos carry width/height attributes (their real size) so the browser reserves their
   space before they load (no layout shift). CSS sets only their width, so keep the height in proportion. */
img.computer_image[width][height],
video.computer_shop_video[width][height] {
    height: auto;
}