@layer pano-plugin {
/* src/panel/SliderPage.svelte */
tr.svelte-1awojle {
    transition:
      transform 0.3s ease,
      background-color 0.2s ease;
  }

  .dragging.svelte-1awojle {
    opacity: 0.4;
    background-color: var(--bs-body-tertiary);
  }

/* src/panel/components/SliderRow.svelte */
.slider-preview.svelte-obrb5k {
    width: 80px;
    height: 45px;
    overflow: hidden;
  }
  .slider-preview.svelte-obrb5k img:where(.svelte-obrb5k) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .slider-preview-placeholder.svelte-obrb5k {
    width: 80px;
    height: 45px;
  }
  .btn-icon.svelte-obrb5k {
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 32px;
    text-align: center;
    border-radius: 8px;
  }
  .dragging.svelte-obrb5k {
    opacity: 0.4;
    background-color: var(--bs-light);
  }
  .clickable.svelte-obrb5k {
    cursor: pointer;
  }

/* src/panel/components/modals/AddEditSliderModal.svelte */
.preview-container.svelte-p56043 {
    transition: all 0.2s ease;
  }

  .form-check-input.svelte-p56043 {
    cursor: pointer;
  }

  .preview-overlay.svelte-p56043 {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

/* src/theme/Slider.svelte */
/* Kept rules: the z-index of the wrapper, the image heights, the layout of the caption box and its fade-in animation.
     Gone: the round-dot restyle of Bootstrap's carousel indicators, the text shadows, the redundant animation-name rule and
     the z-index 20/25 pair of caption and controls (plugin.css is layered, so Bootstrap's own z-index: 1 on the controls
     would win and the caption would cover them). */
  .slider-slider__wrapper.svelte-1omhwdo {
    position: relative;
    z-index: 10;
  }

  .slider-slider__image-container.svelte-1omhwdo {
    position: relative;
    width: 100%;
    height: 400px;
  }

  .slider-slider__image.svelte-1omhwdo {
    height: 400px;
    object-fit: cover;
  }

  /* Next to the sidebar (page:home:top): the carousel has the ratio of a 1x1 sidebar card and is pulled to the column edges
     by cancelling the grid gutter. */
  .slider-slider--home.svelte-1omhwdo {
    --slider-gutter: calc(var(--pano-space, 1rem) * 1.5);
    margin-left: calc(var(--slider-gutter) * -0.5);
    margin-right: calc(var(--slider-gutter) * -0.5);
    width: calc(100% + var(--slider-gutter));
  }

  .slider-slider--home.svelte-1omhwdo .slider-slider__carousel:where(.svelte-1omhwdo) {
    aspect-ratio: 2.05 / 1;
  }

  /* Global top (page:top): full width, panoramic ratio. */
  .slider-slider--top.svelte-1omhwdo .slider-slider__carousel:where(.svelte-1omhwdo) {
    aspect-ratio: 3.5 / 1;
    margin-bottom: 1.5rem;
  }

  .slider-slider--home.svelte-1omhwdo .slider-slider__carousel:where(.svelte-1omhwdo) .carousel-inner:where(.svelte-1omhwdo),
  .slider-slider--home.svelte-1omhwdo .slider-slider__carousel:where(.svelte-1omhwdo) .carousel-item:where(.svelte-1omhwdo),
  .slider-slider--top.svelte-1omhwdo .slider-slider__carousel:where(.svelte-1omhwdo) .carousel-inner:where(.svelte-1omhwdo),
  .slider-slider--top.svelte-1omhwdo .slider-slider__carousel:where(.svelte-1omhwdo) .carousel-item:where(.svelte-1omhwdo),
  .slider-slider--home.svelte-1omhwdo .slider-slider__image-container:where(.svelte-1omhwdo),
  .slider-slider--top.svelte-1omhwdo .slider-slider__image-container:where(.svelte-1omhwdo),
  .slider-slider--home.svelte-1omhwdo .slider-slider__image:where(.svelte-1omhwdo),
  .slider-slider--top.svelte-1omhwdo .slider-slider__image:where(.svelte-1omhwdo) {
    height: 100%;
  }

  /* Caption links sit on the image: keep them readable. */
  .slider-slider__caption-box.svelte-1omhwdo a:where(.svelte-1omhwdo) {
    color: var(--pano-color-secondary);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  .slider-slider__caption-box.svelte-1omhwdo a:where(.svelte-1omhwdo):hover {
    opacity: 0.8;
  }

  @media (max-width: 767.98px) {
    .slider-slider__image-container.svelte-1omhwdo {
      height: 250px;
    }

    .slider-slider__image.svelte-1omhwdo {
      height: 250px;
    }

    .slider-slider--home.svelte-1omhwdo .slider-slider__image:where(.svelte-1omhwdo),
    .slider-slider--top.svelte-1omhwdo .slider-slider__image:where(.svelte-1omhwdo) {
      height: 100%;
    }
  }

  .slider-slider__overlay.svelte-1omhwdo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--slider-overlay-bg, linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%));
    pointer-events: none;
  }

  .slider-slider__caption-box.svelte-1omhwdo {
    padding: 1.5rem 5% 2rem 5%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--slider-box-bg);
    backdrop-filter: var(--slider-box-blur);
    -webkit-backdrop-filter: var(--slider-box-blur);
    transition: all 0.3s ease;
  }

  .slider-slider__caption-box.svelte-1omhwdo h2:where(.svelte-1omhwdo) {
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }

  .slider-slider__caption-box.svelte-1omhwdo p:where(.svelte-1omhwdo) {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
  }

  /* The caption's own geometry is NOT here but inline on the element (see the markup): plugin.css is layered, so for
     every property Bootstrap's unlayered `.carousel-caption` also sets (left / right 15%, bottom, padding, centred text)
     Bootstrap won. Only a server-rendered page hid that, because there the component's CSS is in the head unlayered as
     well; arriving by a link showed Bootstrap's centred box. */

  .slider-slider__animate-up.svelte-1omhwdo {
    animation: svelte-1omhwdo-slider-fade-in-up 0.8s ease backwards;
  }

  .slider-slider__delay-1.svelte-1omhwdo {
    animation-delay: 0.2s;
  }

  @keyframes svelte-1omhwdo-slider-fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}