/* What you'll find inside — cards slider */

.sb-find-inside {
  --sb-fi-navy: #21364d;
  --sb-fi-muted: #64748b;
  --sb-fi-icon-bg: #eef8fb;
  --sb-fi-icon: #2f6fa8;
  --sb-fi-border: #dddee1;
  --sb-fi-card: #ffffff;
  --sb-fi-gap: 20px;
  --sb-fi-visible: 5;

  width: 100%;
  margin: 0 auto;
  font-family: Inter, system-ui, sans-serif;
  box-sizing: border-box;
}

.sb-find-inside *,
.sb-find-inside *::before,
.sb-find-inside *::after {
  box-sizing: border-box;
}

.sb-find-inside__slider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.sb-find-inside__viewport {
  --sb-fi-end-pad: 12px;
  /* Exact slot width — do NOT subtract end-pad (that caused next-card peek on mobile) */
  --sb-fi-card-w: calc(
    (100% - ((var(--sb-fi-visible) - 1) * var(--sb-fi-gap))) / var(--sb-fi-visible)
  );

  flex: 1;
  min-width: 0;
  overflow: hidden;
  outline: none;
}

.sb-find-inside__track {
  display: flex;
  gap: var(--sb-fi-gap);
  scroll-behavior: smooth;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 12px;
  scroll-padding-inline: 0;
}

.sb-find-inside__track::-webkit-scrollbar {
  display: none;
}

/*
 * Outer card = fixed slot width (same for every card).
 * End pad is INSIDE first/last only — does not change flex basis,
 * so middle slides fill the viewport with no next-card peek.
 */
.sb-find-inside__card {
  flex: 0 0 var(--sb-fi-card-w);
  width: var(--sb-fi-card-w);
  max-width: var(--sb-fi-card-w);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}


.sb-find-inside__card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-height: 336px;
  padding: 28px 18px 24px;
  background: var(--sb-fi-card);
  border: 1px solid var(--sb-fi-border);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.sb-find-inside__icon {
  width: 47px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  background: var(--sb-fi-icon-bg);
  border-radius: 10px;
  flex-shrink: 0;
}

.sb-find-inside__icon svg {
  max-width: 30px;
  max-height: 28px;
  display: block;
}

.sb-find-inside__card-title {
  margin: 0 0 12px;
  color: var(--sb-fi-navy);
  font-family: Inter, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 24.15px;
  letter-spacing: 0;
}

.sb-find-inside__card-text {
  margin: 0;
  flex: 1;
  color: var(--sb-fi-muted);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 100%;
}

.sb-find-inside__card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: 18px;
  color: var(--sb-fi-icon);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sb-find-inside__card-link:hover,
.sb-find-inside__card-link:focus-visible {
  background: var(--sb-fi-icon-bg);
  color: #0b2251;
  outline: none;
  transform: translateX(2px);
}

/* Prev / next — CSS chevrons (survive Elementor button/SVG overrides) */
body .sb-find-inside button.sb-find-inside__nav,
.sb-find-inside .sb-find-inside__nav {
  flex-shrink: 0;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #d0d7e0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 2px 8px rgba(33, 54, 77, 0.08) !important;
  color: #21364d !important;
  cursor: pointer;
  filter: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  font-size: 0 !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body .sb-find-inside button.sb-find-inside__nav:hover,
body .sb-find-inside button.sb-find-inside__nav:focus-visible,
.sb-find-inside .sb-find-inside__nav:hover,
.sb-find-inside .sb-find-inside__nav:focus-visible {
  background: #eef8fb !important;
  background-image: none !important;
  border-color: #b7c9d8 !important;
  color: #2f6fa8 !important;
  outline: none;
  filter: none !important;
}

body .sb-find-inside button.sb-find-inside__nav:disabled,
body .sb-find-inside button.sb-find-inside__nav.is-disabled,
.sb-find-inside .sb-find-inside__nav:disabled,
.sb-find-inside .sb-find-inside__nav.is-disabled {
  opacity: 0.4 !important;
  cursor: default;
  pointer-events: none;
}

/* Arrows + dots only when slider can scroll (.is-scrollable) */
body .sb-find-inside:not(.is-scrollable) button.sb-find-inside__nav,
.sb-find-inside:not(.is-scrollable) .sb-find-inside__nav,
body .sb-find-inside button.sb-find-inside__nav[hidden],
.sb-find-inside .sb-find-inside__nav[hidden] {
  display: none !important;
}

.sb-find-inside:not(.is-scrollable) .sb-find-inside__dots,
.sb-find-inside__dots[hidden] {
  display: none !important;
}

.sb-find-inside__chevron {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  border: solid #21364d !important;
  border-width: 0 2.5px 2.5px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.sb-find-inside__nav:hover .sb-find-inside__chevron,
.sb-find-inside__nav:focus-visible .sb-find-inside__chevron {
  border-color: #2f6fa8 !important;
}

.sb-find-inside__chevron--prev {
  transform: rotate(135deg);
  margin-left: 3px !important;
}

.sb-find-inside__chevron--next {
  transform: rotate(-45deg);
  margin-right: 3px !important;
}

/* Pagination — equal round dots */
.sb-find-inside__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  min-height: 16px;
}

body .sb-find-inside .sb-find-inside__dot,
.sb-find-inside__dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #c5d0dc !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

body .sb-find-inside .sb-find-inside__dot.is-active,
.sb-find-inside__dot.is-active {
  width: 10px !important;
  background: #2f6fa8 !important;
  background-image: none !important;
  transform: scale(1.15);
}

.sb-find-inside__dot:focus-visible {
  outline: 2px solid #2f6fa8;
  outline-offset: 2px;
}

/* Large desktop: 5 cards */
@media (min-width: 1200px) {
  .sb-find-inside {
    --sb-fi-visible: 5;
    --sb-fi-gap: 20px;
  }
}

/* Desktop / laptop: 4 cards */
@media (max-width: 1199px) {
  .sb-find-inside {
    --sb-fi-visible: 4;
    --sb-fi-gap: 18px;
  }

  .sb-find-inside__card-title {
    font-size: 19px;
    line-height: 1.2;
  }
}

/* Tablet: 3 cards */
@media (max-width: 991px) {
  .sb-find-inside {
    --sb-fi-visible: 3;
    --sb-fi-gap: 16px;
  }

  .sb-find-inside__card-inner {
    min-height: 340px;
    padding: 24px 16px 20px;
  }
}

/* Small tablet: 2 cards */
@media (max-width: 767px) {
  .sb-find-inside {
    --sb-fi-visible: 2;
    --sb-fi-gap: 14px;
  }

  .sb-find-inside__slider {
    gap: 8px;
  }

  .sb-find-inside__card-inner {
    min-height: 320px;
  }

  .sb-find-inside__card-title {
    font-size: 18px;
  }

  body .sb-find-inside button.sb-find-inside__nav,
  .sb-find-inside .sb-find-inside__nav {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* Mobile: 1 card — full viewport width, no side peek */
@media (max-width: 575px) {
  .sb-find-inside {
    --sb-fi-visible: 1;
    --sb-fi-gap: 12px;
    --sb-fi-end-pad: 8px;
  }

  .sb-find-inside__slider {
    gap: 6px;
  }

  .sb-find-inside__viewport {
    --sb-fi-card-w: 100%;
  }

  .sb-find-inside__card-inner {
    min-height: 300px;
    padding: 24px 20px 20px;
  }

  .sb-find-inside__card-title {
    font-size: 20px;
  }

  .sb-find-inside__card-text {
    font-size: 14px;
    max-width: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-find-inside__track {
    scroll-behavior: auto;
  }

  .sb-find-inside__card-link,
  .sb-find-inside__nav,
  .sb-find-inside__dot {
    transition: none;
  }
}