/* =========================
   Tabs Carousel - Vertical (Outside Arrows + Smart Edge Align) v17
   - Arrows pinned OUTSIDE viewport
   - No track padding tricks (removes initial gap + jump)
   - JS aligns: first=top, last=bottom, others=center
   Usage: add class "tabs-carousel" to the widget/container
   ========================= */

.tabs-carousel{
  --tabs-vp-height: 540px;
  --tabs-arrow-size: 34px;
  --tabs-arrow-gap: 0px;

  /* ✅ فاصله تب اول از بالای باکس / تب آخر از پایین باکس */
  --tabs-edge-gap: 6px;

  /* animation controls */
  --tabs-move-duration: 300ms;
  --tabs-move-ease: linear;
}

.tabs-carousel .bdt-tab-wrapper{
  position: relative;
  display: flex;
    align-items: center;
}

/* viewport (clipped window) */
.tabs-carousel .bdt-tabs-wrap-inside{
  position: relative;
  overflow: hidden !important;
  padding: 0 !important;
  contain: layout paint;

  height: var(--tabs-vp-height);
  max-height: var(--tabs-vp-height);

  touch-action: pan-x;
  overscroll-behavior: contain;

  cursor: grab;
  box-sizing: border-box;
}

/* moving track */
.tabs-carousel .bdt-tab.bdt-tab-default{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;

  width: 100% !important;
  height: max-content !important;

  box-sizing: border-box;
  will-change: transform;

  transition: transform var(--tabs-move-duration) var(--tabs-move-ease) !important;
}

/* while dragging: no transition */
.tabs-carousel .bdt-tab.bdt-tab-default.is-dragging{
  transition: none !important;
}

.tabs-carousel .bdt-tabs-item,
.tabs-carousel .bdt-tabs-item-title{
  width: 100%;
  flex: 0 0 auto !important;
}

.tabs-carousel .bdt-tabs-item-title,
.tabs-carousel .bdt-tab-text{
  white-space: nowrap !important;
}

/* disable selection */
.tabs-carousel .bdt-tabs-wrap-inside,
.tabs-carousel .bdt-tab,
.tabs-carousel .bdt-tabs-item,
.tabs-carousel .bdt-tabs-item-title,
.tabs-carousel .bdt-tab-text{
  -webkit-user-select: none !important;
  user-select: none !important;
}

.tabs-carousel a,
.tabs-carousel img{
  -webkit-user-drag: none;
  user-drag: none;
}

.tabs-carousel .bdt-tabs-item-title{ cursor: pointer; }

.tabs-carousel .bdt-tabs-wrap-inside.is-dragging{ cursor: grabbing; }
.tabs-carousel .bdt-tab.bdt-tab-default.is-dragging .bdt-tabs-item-title{ pointer-events: none; }

/* ✅ arrows pinned OUTSIDE viewport (on wrapper) */
.tabs-carousel .tabs-carousel__arrow{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  width: var(--tabs-arrow-size);
  height: var(--tabs-arrow-size);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  cursor: pointer;
  user-select: none;

  color: #444;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
}

.tabs-carousel .tabs-carousel__arrow--prev{
  /* top: calc(-1 * (var(--tabs-arrow-size) + var(--tabs-arrow-gap))); */
  top: 0;
}
.tabs-carousel .tabs-carousel__arrow--next{
  /* bottom: calc(-1 * (var(--tabs-arrow-size) + var(--tabs-arrow-gap))); */
  bottom: 0;
}

.tabs-carousel .tabs-carousel__arrow:hover{ color: #3E72A8; }

.tabs-carousel .tabs-carousel__arrow::before{
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  display: block;
}
.tabs-carousel .tabs-carousel__arrow--prev::before{ transform: rotate(45deg); }
.tabs-carousel .tabs-carousel__arrow--next::before{ transform: rotate(-135deg); }

.tabs-carousel .tabs-carousel__arrow.is-disabled{
  opacity: 0;
  pointer-events: none;
}

/* fade */
.tabs-carousel .bdt-tabs-wrap-inside::before,
.tabs-carousel .bdt-tabs-wrap-inside::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: 22px;
  pointer-events:none;
  z-index: 5;
}
.tabs-carousel .bdt-tabs-wrap-inside::before{
  top:0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0));
}
.tabs-carousel .bdt-tabs-wrap-inside::after{
  bottom:0;
  background: linear-gradient(to top, rgba(255,255,255,0.92), rgba(255,255,255,0));
}

/* --- Your existing styling (kept) --- */
.tabs-carousel .bdt-tabs .bdt-tab .bdt-tabs-item { padding: 0; }

.tabs-carousel .bdt-tabs .bdt-tab .bdt-tabs-item > a{
  border-bottom: 3px solid transparent;
  background: transparent;
  font-weight: 400;
}
.tabs-carousel .bdt-tabs .bdt-tab .bdt-tabs-item > a {
color: #333;
}
.tabs-carousel .bdt-tabs .bdt-tab .bdt-tabs-item.bdt-active > a{
  border-bottom: 3px solid #3E72A8;
  color: #3E72A8;
  font-weight: 700;
}

.tabs-carousel .bdt-switcher.bdt-switcher-item-content{ margin-top: -4px; }

.tabs-carousel .bdt-tabs .bdt-tab .bdt-tabs-item > a i{
  rotate: 0deg;
  display: none;
  transition: 0.2s all ease-in-out;
}
.tabs-carousel .bdt-tabs .bdt-tab .bdt-tabs-item.bdt-active > a i{ rotate: -90deg; }

.tabs-carousel .bdt-switcher.bdt-switcher-item-content h6{ margin-bottom: 12px; }

.tabs-carousel .bdt-tabs .bdt-tab .bdt-tabs-item .bdt-tab-title-icon-wrapper{
  flex-direction: row;
}










.bdt-switcher-item-content > .bdt-tab-content-item > div{
display: flex;
    gap: 60px;
    line-height: 2;
    font-size: 14px;
    font-weight: 300;
    text-align: justify;
}

/* ستون چپ: دو آیتم روی هم */
.bdt-switcher-item-content > .bdt-tab-content-item > div > :nth-child(1){
width: 30%;
}

/* ستون راست: آیتم اول */
.bdt-switcher-item-content > .bdt-tab-content-item > div > :nth-child(2){
width: 70%;
}

.bdt-switcher-item-content > .bdt-tab-content-item > div h6 {
    font-size: 20px;
    line-height: 2;
}

.bdt-tab.bdt-tab-left {    height: 100%;  justify-content: center;}

.bdt-tab-content-item img {
    border-radius: 500px;
    box-shadow: 0 0 30px 50px #e5edf6;
}