/* PU Service Feature Tabs Widget (ParsUptime) */
.pu-sft{direction:rtl}
.pu-sft *{box-sizing:border-box}

.pu-sft{
  --pu-primary: var(--primary-color, #0d6efd);
  --pu-primary-rgb: var(--primary-color-rgb, 13,110,253);
  --pu-bg-body: var(--bg-body, #ffffff);
  --pu-bg-card: var(--bg-card, #f7f7fb);
  --pu-text: var(--text-body, #141414);
  --pu-muted: var(--text-muted, #747474);
  --pu-border: rgba(var(--border-color-rgb, 229,231,242), 1);
  --pu-radius: var(--border-radius, 14px);
  --pu-gap: 24px;
  /* کنترل شدت هاله/سایه تصویر (قابل تنظیم از داخل ویجت) */
  --pu-shadow-blur: 60px;
}

.pu-sft__container{
  width:100%;
  max-width: var(--container, 1320px);
  margin:0 auto;
  padding: 0 var(--gutter, 1.5rem);
}

.pu-sft__header{
  text-align:center;
  margin-bottom: 28px;
}

.pu-sft__title{
  margin:0 0 10px 0;
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height:1.45;
  color: var(--pu-text);
}

.pu-sft__desc{
  margin:0;
  color: var(--pu-muted);
  font-size: 18px;
  line-height: 2.1;
}

.pu-sft__grid{
  display:flex;
  align-items:flex-start;
  gap: var(--pu-gap);
}

.pu-sft__nav{
  min-width: 240px;
  width: 280px;
  /* مهم: برای جلوگیری از override شدن توسط استایل‌های عمومی قالب/Elementor */
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap: 12px;
  overflow-x:hidden !important;
  overflow-y:visible !important;
}

.pu-sft__tab-btn{
  appearance:none;
  border:1px solid var(--pu-border);
  background: var(--pu-bg-body);
  border-radius: 10px;
  padding: 14px 16px;
  cursor:pointer;
  text-align:center;
  font-weight: 700;
  font-size: 15px;
  color: rgba(var(--pu-primary-rgb), .88);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition: all .22s ease;
  outline:none;
  user-select:none;
  white-space:nowrap;
}

/* جلوگیری از بوردر/فوکوس رینگ مشکی (مرورگر/قالب) */
.pu-sft__tab-btn:focus,
.pu-sft__tab-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.pu-sft__tab-btn.is-active:focus,
.pu-sft__tab-btn.is-active:focus-visible{
  outline: none !important;
  box-shadow: 0 14px 36px rgba(var(--pu-primary-rgb), .18) !important;
}

.pu-sft__tab-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--pu-primary-rgb), .35);
}

.pu-sft__tab-arrow{
  display:none;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}

.pu-sft__tab-btn.is-active{
  background: var(--pu-primary);
  color: #fff;
  border-color: rgba(var(--pu-primary-rgb), .55);
  box-shadow: 0 14px 36px rgba(var(--pu-primary-rgb), .18);
}

.pu-sft__tab-btn.is-active .pu-sft__tab-arrow{
  display:inline-block;
}

.pu-sft__panes{
  flex:1 1 auto;
  min-width: 0;
}

.pu-sft__pane{
  background: transparent;
}

.pu-sft__pane-inner{
  display:flex;
  align-items:center;
  gap: 28px;
  padding: 8px 0;
}

.pu-sft__image-col{
  flex: 0 0 55%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.pu-sft__imgwrap{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.pu-sft--shadow .pu-sft__imgwrap::before{
  content:"";
  position:absolute;
  width: 88%;
  height: 88%;
  top: 16%;
  left: 6%;
  /* هاله‌ی نرم و گرد (بدون کادر مربعی) */
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--pu-primary-rgb), .35) 0%,
    rgba(var(--pu-primary-rgb), .20) 35%,
    rgba(var(--pu-primary-rgb), 0) 70%
  );
  filter: blur(calc(var(--pu-shadow-blur) * .25));
  border-radius: 999px;
  z-index:0;
  pointer-events:none;
}

/* هاله‌ی دوم (لایه‌ی داخلی) برای طبیعی‌تر شدن نور پشت تصویر */
.pu-sft--shadow .pu-sft__imgwrap::after{
  content:"";
  position:absolute;
  width: 68%;
  height: 68%;
  top: 26%;
  left: 16%;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--pu-primary-rgb), .22) 0%,
    rgba(var(--pu-primary-rgb), 0) 72%
  );
  filter: blur(calc(var(--pu-shadow-blur) * .18));
  border-radius: 999px;
  z-index:0;
  pointer-events:none;
}

.pu-sft__img{
  position:relative;
  z-index:1;
  width:100%;
  max-width: 450px;
  height:auto;
  margin-top: 16px;
  border-radius: var(--pu-radius);
  display:block;
  background: transparent;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* فقط هاله پشت تصویر؛ بدون «کادر» یا سایه‌ی دور تصویر */
.pu-sft--shadow .pu-sft__img{
  box-shadow: none !important;
  filter: none !important;
}

.pu-sft__text-col{
  flex: 1 1 45%;
  min-width: 260px;
}

.pu-sft__pane-title{
  margin:0 0 12px 0;
  font-weight: 900;
  font-size: 20px;
  color: rgba(var(--pu-primary-rgb), .88);
}

.pu-sft__pane-text{
  color: var(--pu-muted);
  font-size: 16px;
  line-height: 2.05;
  text-align: justify;
}

/* Responsive */
@media (max-width: 991.98px){
  .pu-sft__grid{
    flex-direction:column !important;
    overflow-x:hidden !important;
  }
  .pu-sft__nav{
    width:100% !important;
    min-width: 0;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    padding-bottom: 0;
    gap: 10px;
  }
  .pu-sft__tab-btn{
    width: 100%;
    min-width: 0 !important;
    white-space: normal;
  }
  .pu-sft__pane-inner{
    flex-direction:column;
  }
  .pu-sft__image-col, .pu-sft__text-col{
    flex: 0 0 auto;
    width: 100%;
  }
  .pu-sft__img{
    margin-top: 8px;
    max-width: 520px;
  }
}

@media (max-width: 575.98px){
  .pu-sft__desc{font-size:16px}
  /* در موبایل تب‌ها باید ستونی باشند و هیچ اسکرول افقی ایجاد نشود */
  .pu-sft__tab-btn{width:100% !important; min-width:0 !important; padding: 12px 14px; white-space: normal !important}
  .pu-sft__pane-text{font-size:15px}
}