/* All code comments in English */

/* ---------- Section & headings ---------- */
.section__tiered-commissions {
  padding: 80px 0 20px;
  background: #ffffff; /* page base */
  overflow: hidden !important;

    > * {
        font-family: 'Geist', sans-serif;
    }
}
.section__tiered-commissions .tcs-title {
  text-align: center;
  margin-bottom: 40px;
  color: #2A1C4A;
}
.section__tiered-commissions .tcs-subtitle {
  text-align: center;
  margin-bottom: 10px;
  color: #757575;
}

/* ---------- Viewport: give something to blur against ---------- */
.tcs-viewport {
  position: relative;
  /*overflow: hidden;*/
  padding-inline: 0;
  /*max-width: 1285px;*/
  margin: 0 auto;
}

/* ---------- Splide core ---------- */
.tcs-splide {
  width: 100%;
  padding: 30px 0 60px;
  perspective: 1000px;
  overflow: hidden !important;
  position: relative; /* required for side fades */
}

/* Side fades: transparent, not white slabs (so blur remains visible) */
.tcs-splide::before,
.tcs-splide::after {
  /*content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);*/
}
.tcs-splide::before { /*left: 0; transform: scaleX(1);*/ }
.tcs-splide::after  { /*right: 0; transform: scaleX(-1);*/ }

/* Keep internals transparent so cards see the scene backdrop */
.tcs-splide .splide__track { overflow: visible; background: transparent; }
.tcs-splide .splide__list  { align-items: stretch; position: relative; background: transparent; }

/* z-index on slides only (not on inner cards) */
.tcs-splide .splide__slide { position: relative; z-index: 0; }
.tcs-splide .splide__slide.is-prev,
.tcs-splide .splide__slide.is-next { z-index: 1; }
.tcs-splide .splide__slide.is-active { z-index: 3; }

/* ---------- Card base (no backdrop here) ---------- */
.tcs-slide {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;              /* glass overlay provides fill */
  border: 1px solid rgba(85,40,190,.26);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);

  transform: translateY(0) scale(1);
  transform-origin: center center;
  opacity: 1;
  transition: transform .45s ease, box-shadow .45s ease, opacity .45s ease, filter .45s ease;
  will-change: transform, box-shadow, opacity, filter;

  min-width: 344px;
  min-height: 388px;
}

/* Ensure card content appears above the glass overlay */
.tcs-slide .tcs-slide-content > * {
  position: relative;
  z-index: 1;
}

/* Optional image inside card (won't block the backdrop; sits above it) */
.tcs-slide .tcs-bg {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    margin-top: -40px;
    scale: 1.2;
}

/* ---------- Tiered sizes + overlap (towards center) ---------- */
.tcs-slide[data-pos="0"]{
  transform: translateY(0) scale(1.00);
  opacity: 1;
  filter: none;
}

/* neighbors push toward the center for overlap */
.tcs-slide[data-pos="-1"]{ transform: translateX(40px)  translateY(0) scale(.90); }
.tcs-slide[data-pos="1"]{ transform: translateX(-40px) translateY(0) scale(.90); }

/* far sides */
.tcs-slide[data-pos="-2"]{ transform: translateX(100px)  translateY(0) scale(.80); }
.tcs-slide[data-pos="2"]{ transform: translateX(-100px) translateY(0) scale(.80); }

/* others */
.tcs-slide:not([data-pos]){ transform: translateY(0) scale(1); }

/* ---------- UI bits ---------- */
/*.tcs-splide .splide__arrow,
.tcs-splide .splide__pagination { display: none !important; }*/

/* Keep SR text hidden while preserving accessibility */
.splide__sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tcs-slide {
    background: transparent;
    z-index: 3;
    backdrop-filter: blur(4px);
}

.tcs-glass {
    margin-top: -50px;
}

.tcs-l1 {
    text-align: center;
    font-weight: 600;
}

.tcs-l2 {
    text-align: center;
    margin-bottom: 45px;
    font-weight: 500;
    margin-top: 10px;
}

.tcs-splide .custom-splide__arrow,
.tcs-splide .splide__arrow,
.section__tiered-commissions .custom-splide__arrow,
.section__tiered-commissions .splide__arrow {
    -ms-flex-align: center;
    align-items: center;
    background: #ccc;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    height: 2em;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: .7;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    z-index: 1;
}

.tcs-splide .splide__arrow,
.tcs-splide .custom-splide__arrow,
.section__tiered-commissions .splide__arrow,
.section__tiered-commissions .custom-splide__arrow {
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #C6C4EA;
    background-color: rgb(38 35 101 / 9%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    filter: drop-shadow(4px 4px 4px rgba(39, 35, 101, 0.38));
}

.tcs-splide .splide__arrow--prev,
.tcs-splide .custom-splide__arrow--prev,
.section__tiered-commissions .splide__arrow--prev,
.section__tiered-commissions .custom-splide__arrow--prev {
    right: auto !important;
    left: -45px !important;
}
.tcs-splide .splide__arrow--next,
.tcs-splide .custom-splide__arrow--next,
.section__tiered-commissions .splide__arrow--next,
.section__tiered-commissions .custom-splide__arrow--next {
    right: -45px;
}

.tcs-splide .splide__arrow:after,
.tcs-splide .custom-splide__arrow:after,
.section__tiered-commissions .splide__arrow:after,
.section__tiered-commissions .custom-splide__arrow:after {
    content: url(../../public/images/arrow-circle-v2.svg);
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.tcs-splide .splide__arrow--prev:after,
.tcs-splide .custom-splide__arrow--prev:after,
.section__tiered-commissions .splide__arrow--prev:after,
.section__tiered-commissions .custom-splide__arrow--prev:after {
    transform: rotate(180deg);
}

.tcs-splide .splide__arrow svg,
.tcs-splide .custom-splide__arrow svg,
.section__tiered-commissions .splide__arrow svg,
.section__tiered-commissions .custom-splide__arrow svg {
    display: none;
}

@media screen and (max-width: 1666px) {
  .tcs-splide .splide__arrow--prev,
  .tcs-splide .custom-splide__arrow--prev,
  .section__tiered-commissions .splide__arrow--prev,
  .section__tiered-commissions .custom-splide__arrow--prev {
      right: auto !important;
      left: 45px !important;
  }
  .tcs-splide .splide__arrow--next,
  .tcs-splide .custom-splide__arrow--next,
  .section__tiered-commissions .splide__arrow--next,
  .section__tiered-commissions .custom-splide__arrow--next {
      right: 45px;
  }
}

@media screen and (max-width: 500px) {
    .tcs-slide .tcs-bg {
        scale: 1.1;
    }

    .tcs-slide {
      min-width: 260px;
      min-height: 290px;
      max-width: 260px;
      max-height: 290px;
    }
}