/*
** Kivvi overrides for third-party plugin CSS
**
** Rules that belong to a SevenSpikes plugin's own stylesheet but must not be edited there: those
** files live under Nop.Web/Plugins/ and are replaced wholesale on a plugin upgrade. Overriding
** from here keeps the change upgrade-safe.
**
** Specificity, not !important: every rule below is scoped one level deeper than the vendor rule it
** replaces, so it wins no matter which stylesheet the browser sees last.
*/

/* --------------------------------------------------------------------------
** AnywhereSliders - the white "loading" block on the homepage
**
** Vendor: SevenSpikes.Nop.Plugins.AnywhereSliders/Themes/Pacific/Content/slick/anywhereSliders.css
**   .anywhere-slider { background-color: #fff; }
**   .anywhere-slider:before { ...60px ring, border-color: #444 transparent, spin 1s... }
** plus slick's own:
**   .slick-slide { display: none; }   until .slick-initialized is added
**
** So before slick runs, the slider is a white box with a dark grey spinner in it. The theme has
** already given .slider-wrapper a cream background and 16px radius
** (Themes/Pacific/Content/css/styles.css:1342) - the vendor's white simply covers it.
**
** slick cannot initialise until jQuery, jQuery-UI, kendo and the SevenSpikes core have all loaded
** and run, so on a cold load that white block sits there for seconds and reads as broken. Letting
** the cream show through makes the wait look like part of the design.
**
** This is cosmetic only. The real fix for the delay is fewer render-blocking scripts - see the
** bundling change in src/contexts/changelog/nop-web-bundling-and-dynamic-compression.md.
** -------------------------------------------------------------------------- */

.slider-wrapper .anywhere-slider,
.slider-wrapper .anywhere-slider .slick-track {
    background-color: transparent;
}

/* softer placeholder ring - the vendor's #444 on white is louder than the content it stands in for */
.slider-wrapper .anywhere-slider:before {
    width: 40px;
    height: 40px;
    border-width: 3px;
    border-color: rgba(23, 76, 75, .35) transparent;
}

/* once slick has initialised the spinner is finished - the vendor leaves it running underneath */
.slider-wrapper .anywhere-slider.slick-initialized:before {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .slider-wrapper .anywhere-slider:before {
        animation: none;
    }
}