/* Webbo Remote Scroll v2.3.7 */

.elementor-widget-webbo-remote-scroll {
  --wrs-manual-rows: 1;
  --wrs-manual-columns: 1;
  --wrs-manual-item-width: 240px;
  --wrs-column-gap: 20px;
  --wrs-row-gap: 20px;
  --wrs-grid-rows: 2;
  --wrs-grid-column-width: 240px;
  --wrs-grid-track-width: 100%;
  --wrs-disabled-opacity: 35%;
  --wrs-edge-fade-width: 32px;
}

.wrs-widget {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.wrs-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin-bottom: 12px;
}

.wrs-widget__header--hidden-static {
  display: none !important;
}

.wrs-widget__heading {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.wrs-widget__navigation {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
}

.wrs-widget__navigation--hidden-static {
  display: none !important;
}

.wrs-widget__button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  line-height: 1;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.wrs-widget__button.is-disabled {
  opacity: var(--wrs-disabled-opacity);
  cursor: default;
}

.wrs-widget__button svg,
.wrs-widget__button i {
  display: block;
  pointer-events: none;
}

/* BLACK: the visible window / scrollport. */
.wrs-widget__viewport {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  overflow-anchor: none;
}

.wrs-widget__viewport--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wrs-widget__viewport--hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Optional edge fade -------------------------------------------------------
 * Applied to BLACK so the content itself fades regardless of the section
 * background. JavaScript switches states as the viewport reaches each edge. */
.wrs-widget__viewport--edge-fade {
  --wrs-edge-fade-stop-left: var(--wrs-edge-fade-width);
  --wrs-edge-fade-stop-right: calc(100% - var(--wrs-edge-fade-width));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.wrs-widget__viewport--edge-fade.wrs-edge-fade--both {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--wrs-edge-fade-stop-left), #000 var(--wrs-edge-fade-stop-right), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--wrs-edge-fade-stop-left), #000 var(--wrs-edge-fade-stop-right), transparent 100%);
}

.wrs-widget__viewport--edge-fade.wrs-edge-fade--right {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 var(--wrs-edge-fade-stop-right), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 var(--wrs-edge-fade-stop-right), transparent 100%);
}

.wrs-widget__viewport--edge-fade.wrs-edge-fade--left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--wrs-edge-fade-stop-left), #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--wrs-edge-fade-stop-left), #000 100%);
}

.wrs-widget__viewport--edge-fade.wrs-edge-fade--none {
  -webkit-mask-image: none;
  mask-image: none;
}

/* RED: the surface that is allowed to become wider than BLACK. */
.wrs-widget__track-slot {
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  max-width: none;
  overflow: visible;
  overflow-anchor: none;
}

.wrs-widget__track-slot > .e-con,
.wrs-widget__track-slot > .elementor-element {
  box-sizing: border-box !important;
  max-width: none !important;
}

/* Manual Content ---------------------------------------------------------
 * Webbo owns the red surface and the manual green layout. These selectors
 * intentionally cover both Elementor DOM variants:
 *   1) child widgets are direct children of the nested Container
 *   2) child widgets live in the Container's direct .e-con-inner wrapper
 * The exact same CSS is used in the editor and on the live site.
 */
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .e-con,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .elementor-element,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .e-con > .e-con-inner,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .elementor-element > .e-con-inner {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
}

.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .e-con,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .elementor-element {
  flex: 0 0 auto !important;
}

/* Applying the grid to both possible content owners is harmless. If an
 * .e-con-inner exists, the outer Container has only that one child while the
 * inner wrapper performs the real item grid. If no inner wrapper exists, the
 * outer Container itself performs the grid. */
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .e-con,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .elementor-element,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .e-con > .e-con-inner,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .elementor-element > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(var(--wrs-manual-columns), var(--wrs-manual-item-width)) !important;
  grid-template-rows: repeat(var(--wrs-manual-rows), auto) !important;
  grid-auto-flow: row !important;
  column-gap: var(--wrs-column-gap) !important;
  row-gap: var(--wrs-row-gap) !important;
  align-items: start !important;
  justify-content: start !important;
}

.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .e-con > .elementor-element,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .elementor-element > .elementor-element,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .e-con > .e-con-inner > .elementor-element,
.wrs-widget[data-wrs-content-mode="manual"] .wrs-widget__track-slot > .elementor-element > .e-con-inner > .elementor-element {
  box-sizing: border-box !important;
  width: var(--wrs-manual-item-width) !important;
  min-width: var(--wrs-manual-item-width) !important;
  max-width: var(--wrs-manual-item-width) !important;
}

/* Grid / Loop ------------------------------------------------------------
 * BLACK and RED remain Webbo-owned. JavaScript measures the inserted GREEN
 * grid in its native responsive state, then changes only its grid geometry
 * (rows, generated horizontal columns, and width). The grid widget keeps its
 * own card styling, query, template, and gap values.
 */
.wrs-widget[data-wrs-content-mode="grid"] .wrs-widget__track-slot {
  width: max(100%, var(--wrs-grid-track-width)) !important;
  min-width: max(100%, var(--wrs-grid-track-width)) !important;
  max-width: none !important;
}

.wrs-widget[data-wrs-content-mode="grid"] .wrs-widget__track-slot > .e-con,
.wrs-widget[data-wrs-content-mode="grid"] .wrs-widget__track-slot > .elementor-element {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
}

.wrs-widget[data-wrs-content-mode="grid"] .wrs-widget__track-slot > .e-con > .e-con-inner,
.wrs-widget[data-wrs-content-mode="grid"] .wrs-widget__track-slot > .elementor-element > .e-con-inner {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
}

/* Grid / Loop runtime layout ------------------------------------------------
 * Webbo only adds this class to the detected GREEN grid. Card styling, query,
 * typography, images, borders, and the grid widget's own gap values remain
 * untouched. JavaScript supplies the exact row count, column count, and
 * measured natural column width as inline grid geometry. */
.wrs-grid-runtime {
  box-sizing: border-box !important;
  max-width: none !important;
}

/* Elementor editor usability. The nested child remains a normal visible
 * drop target. Runtime layout is never temporarily removed, so the editor and
 * frontend stay visually consistent. */
.elementor-editor-active .elementor-widget-webbo-remote-scroll .wrs-widget__track-slot,
.elementor-editor-active .elementor-widget-webbo-remote-scroll .wrs-widget__track-slot > .e-con,
.elementor-editor-active .elementor-widget-webbo-remote-scroll .wrs-widget__track-slot > .elementor-element {
  min-height: 100px;
}

.wrs-remote-disabled {
  opacity: var(--wrs-remote-disabled-opacity, .35) !important;
}

/* Legacy v1 support. */
.remote-left,
.remote-right {
  cursor: pointer;
  transition: opacity .25s ease;
}

@media (max-width: 767px) {
  .remote-scroll .remote-container > * {
    min-width: max-content !important;
  }

  .remote-scroll .remote-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .remote-scroll .remote-container::-webkit-scrollbar {
    display: none;
  }
}