/* =========================================================================
   app.css  -  Static-mirror additions for the Petcover Group landing page
   Purely additive. Every rule is scoped to existing theme classes so it
   cannot leak into or conflict with the theme stylesheet.
   ========================================================================= */

/* The live theme JS turns each stack of .bk images inside a section image
   wrap into a single cross-fading slideshow. We reproduce that here.
   The first .bk keeps flow (its ::before sets the 64% aspect / height);
   the rest are absolutely stacked on top and cross-faded by app.js.        */
.m__section__image-wrap{position:relative;}
.m__section__image-wrap > .bk{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;
  opacity:0;
  transition:opacity 1s ease-in-out;
}
.m__section__image-wrap > .bk:first-child{position:relative;} /* defines height */
.m__section__image-wrap > .bk.is-active{opacity:1;}
/* Before JS runs, show the first frame so there is never a blank box */
.no-bkjs .m__section__image-wrap > .bk:first-child{opacity:1;}

/* Single-frame wraps (only one .bk) just display normally */
.m__section__image-wrap > .bk:only-child{position:relative;opacity:1;}

/* Safety: this static mirror has no WordPress admin bar, so make sure the
   fixed header never leaves a gap at the very top.                          */
html.mz_no-js{margin-top:0 !important;}

/* Feefo widget is a third-party embed; give its container a sensible min
   height so the section never collapses if the script is blocked offline.  */
#feefo-service-review-carousel-widgetId{min-height:60px;}

/* -------------------------------------------------------------------------
   Slider dots navigation
   Reproduces the per-section image pager shown on the live site. app.js
   builds one .bk-dot button per frame inside .bk-dots. Active dot uses the
   theme green (#8cc754); inactive dots are translucent white so they read
   on both light and dark photos. Scoped under .m__section__image-wrap so it
   cannot leak into the theme stylesheet.
   ------------------------------------------------------------------------- */
.m__section__image-wrap .bk-dots{
  position:absolute;
  left:0; right:0; bottom:14px;
  z-index:3;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin:0; padding:0;
  pointer-events:none;            /* gaps pass clicks through; dots opt back in */
}
.m__section__image-wrap .bk-dot{
  pointer-events:auto;
  width:11px; height:11px;
  margin:0; padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.65);
  box-shadow:0 0 2px rgba(0,0,0,.28);
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background .25s ease, transform .25s ease;
}
.m__section__image-wrap .bk-dot:hover{background:rgba(255,255,255,.95);}
.m__section__image-wrap .bk-dot.is-active{
  background:#8cc754;
  transform:scale(1.08);
}
.m__section__image-wrap .bk-dot:focus-visible{
  outline:2px solid #15426d;
  outline-offset:2px;
}
@media (max-width:600px){
  .m__section__image-wrap .bk-dots{bottom:10px; gap:7px;}
  .m__section__image-wrap .bk-dot{width:9px; height:9px;}
}

/* -------------------------------------------------------------------------
   Hide the Feefo "Trusted Service Award" badge in the reviews carousel.
   The widget renders it as a <feefowidget-award-badge> custom element
   (confirmed against the live Feefo carousel markup). app.js re-applies this
   as a fallback in case the widget injects an inline display style.
   ------------------------------------------------------------------------- */
feefowidget-award-badge{display:none !important;}