/* Container: flex box, desktop-first. Direction/align/gap come from generated CSS. */
.zx-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  gap: var(--zx-gap, 20px);
  padding: var(--zx-container-padding, 0);
  /* A container narrower than its parent (Width / Max width / Content width) grows from the centre
     in both presets; a partial Margin keeps these auto margins (see the dimensions CSS handler). */
  margin-inline: auto;
  text-decoration: none;
  color: inherit;
}
.zx-container--boxed {
  max-width: var(--zx-content-width, 1140px);
}
.zx-container--full {
  max-width: none;
}
.zx-container.zx-has-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.zx-container.zx-has-overlay > * {
  position: relative;
  z-index: 1;
}
/* Nested containers (columns) fill their row by default; zero specificity so a column's own width wins. */
:where(.zx-container > .zx-container) {
  width: 100%;
  min-width: 0;
}

/* ---- Background media (video / slideshow): first child, behind overlay and content ---- */
.zx-container.zx-has-bg-media {
  isolation: isolate;
  overflow: hidden;
}
.zx-container.zx-has-bg-media > * {
  position: relative;
  z-index: 2;
}
.zx-container.zx-has-bg-media.zx-has-overlay::before {
  z-index: 1;
}
.zx-container.zx-has-bg-media > .zx-bg-video,
.zx-container.zx-has-bg-media > .zx-bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin: 0;
}
.zx-bg-video video,
.zx-bg-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
.zx-bg-video__toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
}
/* Theme shield (docs/WIDGET-GUIDE.md "Buttons and theme CSS"): themes restyle `button:hover`/`:active` (0,1,1),
   so the hover/active colours are declared here; user controls (`.zx-<id> ...`) still win. */
.zx-bg-video__toggle:is(:hover, :active) {
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.zx-bg-video__toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  background: currentColor;
  /* pause bars */
  clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%);
  box-shadow: 8px 0 0 currentColor;
}
.zx-bg-video.is-paused .zx-bg-video__toggle::before {
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
  box-shadow: none;
}
.zx-bg-slideshow__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
.zx-bg-slideshow__slide.is-active,
.zx-bg-slideshow__slide.is-leaving {
  transition:
    opacity 1s ease,
    transform 1s ease;
}
.zx-bg-slideshow__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.zx-bg-slideshow[data-transition='slide'] .zx-bg-slideshow__slide {
  opacity: 1;
  transform: translateX(100%);
}
.zx-bg-slideshow[data-transition='slide'] .zx-bg-slideshow__slide.is-active {
  transform: translateX(0);
}
.zx-bg-slideshow[data-transition='slide'] .zx-bg-slideshow__slide.is-leaving {
  transform: translateX(-100%);
}
.zx-bg-slideshow[data-ken-burns] .zx-bg-slideshow__slide.is-active {
  animation: zx-kenburns var(--zx-slide-duration, 5000ms) linear forwards;
}
@keyframes zx-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .zx-bg-slideshow[data-ken-burns] .zx-bg-slideshow__slide.is-active {
    animation: none;
  }
}

/* ---- Shape dividers (widgets/container/shapes/*.svg) ---- */
.zx-container > .zx-shape,
.zx-container.zx-has-bg-media > .zx-shape,
.zx-container.zx-has-overlay > .zx-shape {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  direction: ltr;
  z-index: 1;
}
/* Default colour on its own (0,2,0) rule so the "Color" control (`.zx-<id> > .zx-shape--top`) still wins
   when the container also has an overlay / background media (the (0,3,0) rules above). */
.zx-container > .zx-shape {
  color: #fff;
}
.zx-container > .zx-shape--top {
  top: -1px;
}
.zx-container > .zx-shape--bottom {
  bottom: -1px;
  transform: rotate(180deg);
}
.zx-container > .zx-shape svg {
  display: block;
  position: relative;
  left: 50%;
  width: calc(100% + 1.3px);
  height: 60px;
  transform: translateX(-50%);
  fill: currentColor;
}
.zx-container > .zx-shape--flip svg {
  transform: translateX(-50%) scaleX(-1);
}
.zx-container > .zx-shape--invert svg {
  transform: translateX(-50%) scaleY(-1);
}
.zx-container > .zx-shape--flip.zx-shape--invert svg {
  transform: translateX(-50%) scale(-1, -1);
}
.zx-container > .zx-shape--front,
.zx-container.zx-has-bg-media > .zx-shape--front,
.zx-container.zx-has-overlay > .zx-shape--front {
  z-index: 3;
}