.bshy-card{
  direction: rtl !important;
  border: 1px solid var(--bshy-card-border, rgba(0,0,0,0.06)) !important;
  border-radius: 22px !important;
  padding: 26px 28px;
  background: var(--bshy-card-bg, #fff);
  max-width: 980px;
  width: auto;
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;

  --bshy-accent: #22a85a;
  --bshy-level: 0.2;
  --bshy-slider-pct: 0%;

  --bshy-title-color: #1b1b1b;
  --bshy-subtitle-color: rgba(27,27,27,0.70);

  --bshy-bubble-top: 0px;
  --bshy-bubble-bg: #fff;
  --bshy-bubble-border: rgba(0,0,0,0.10);
  --bshy-bubble-title: #1b1b1b;
  --bshy-bubble-desc: rgba(27,27,27,0.70);

  --bshy-slider-track: #dfe5e7;
  --bshy-slider-thumb: var(--bshy-accent);

  --bshy-btn-bg: #f4f6f7;
  --bshy-btn-border: rgba(0,0,0,0.08);
  --bshy-btn-text: #222;

  --bshy-btn-active-bg: rgba(34,168,90,0.14);
  --bshy-btn-active-border: rgba(34,168,90,0.55);
  --bshy-btn-active-text: #1c7c45;

  --bshy-battery-stroke: rgba(40,40,40,0.35);
  --bshy-liquid-color: #0f7f3f;
  --bshy-wave-color: rgba(255,255,255,0.20);

  --bshy-show-bg: var(--bshy-accent);
  --bshy-show-text: #fff;
}

/* تزئین پس‌زمینه (اگر color-mix ساپورت نشه، صرفاً نمایش نمی‌ده) */
.bshy-card::before{
  content:"";
  position:absolute;
  inset:auto -20% -40% -20%;
  height: 55%;
  background:
    radial-gradient(closest-side at 20% 40%, color-mix(in srgb, var(--bshy-accent) 18%, transparent), transparent 65%),
    radial-gradient(closest-side at 55% 60%, color-mix(in srgb, var(--bshy-accent) 12%, transparent), transparent 68%),
    radial-gradient(closest-side at 85% 35%, color-mix(in srgb, var(--bshy-accent) 10%, transparent), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
}
.bshy-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
  pointer-events:none;
  opacity: 0.35;
}

.bshy-card__header{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  margin-bottom: 18px;
}

.bshy-card__title{
  font-size: 26px;
  font-weight: 900;
  color: var(--bshy-title-color);
}
.bshy-card__subtitle{
  font-size: 14px;
  color: var(--bshy-subtitle-color);
}

/* ✅ Slider + Battery + Buttons کنار هم */
.bshy-controls-row{
  position: relative;
  z-index: 1;
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

/* slider */
.bshy-slider{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 14px;
  direction: ltr;
  width: 520px;     /* توسط کنترلر Slider Width override می‌شود */
  padding: 76px 6px 0 6px;
}

.bshy-bubble{
  position:absolute;
  top: calc(0px + var(--bshy-bubble-top));
  left: clamp(0%, var(--bshy-slider-pct), 100%);
  transform: translateX(-50%);
  background: var(--bshy-bubble-bg);
  border: 1px solid var(--bshy-bubble-border);
  box-shadow: 0 12px 25px rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 180px;
  text-align: center;
  pointer-events:none;
  z-index: 2;
}
.bshy-bubble::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--bshy-bubble-bg);
  border-right: 1px solid var(--bshy-bubble-border);
  border-bottom: 1px solid var(--bshy-bubble-border);
  rotate: 45deg;
  border-radius: 2px;
}
.bshy-bubble__title{
  font-weight: 900;
  font-size: 16px;
  color: var(--bshy-bubble-title);
}
.bshy-bubble__desc{
  margin-top: 2px;
  font-size: 12px;
  color: var(--bshy-bubble-desc);
}

/* range */
.bshy-slider__input{
  width: 100%;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  outline: none;
  background:
    linear-gradient(to right,
      var(--bshy-accent) 0%,
      var(--bshy-accent) var(--bshy-slider-pct),
      var(--bshy-slider-track) var(--bshy-slider-pct),
      var(--bshy-slider-track) 100%);
}

.bshy-slider__input::-webkit-slider-thumb{
  appearance:none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--bshy-slider-thumb);
  box-shadow: 0 8px 16px rgba(0,0,0,0.20);
  border: 3px solid #fff;
  cursor: pointer;
  margin-top: -6px;
}
.bshy-slider__input::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
}

.bshy-slider__input::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--bshy-slider-thumb);
  border: 3px solid #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.20);
  cursor: pointer;
}
.bshy-slider__input::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: transparent;
}

.bshy-slider__scale{
  display:flex;
  justify-content: space-between;
  align-items: center;
  direction:ltr;
  font-size: 13px;
  color: rgba(27,27,27,0.60);
  padding: 0 2px;
}

/* battery */
.bshy-battery{
  /* ✅ حداقل ارتفاع باتری */
  min-height: 300px;

  /* ✅ ارتفاع داینامیک (JS مقدار می‌دهد) */
  height: var(--bshy-battery-h, 300px);

  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;

  /* ✅ اجازه بده با بلند شدن باتری، عرض هم منطقی بزرگ شود */
  width: auto;
  min-width: 170px;
}

.bshy-battery__svg{
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* liquid / waves */
.bshy-liquid{
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(var(--bshy-level));
  transition: transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform;
}

.bshy-wave__shape{ fill: var(--bshy-wave-color); }

.bshy-wave--back{ opacity: 0.55; animation: bshy-wave-drift-back 5.4s ease-in-out infinite; }
.bshy-wave--mid { opacity: 0.75; animation: bshy-wave-drift-mid 3.8s ease-in-out infinite; }
.bshy-wave--front{ opacity: 1; animation: bshy-wave-drift-front 2.9s ease-in-out infinite; }
.bshy-liquid{ animation: bshy-liquid-breathe 2.6s ease-in-out infinite; }

@keyframes bshy-wave-drift-back { 0%{transform:translate(-16px, .4px)} 50%{transform:translate(10px,-.8px)} 100%{transform:translate(16px, .4px)} }
@keyframes bshy-wave-drift-mid  { 0%{transform:translate(-22px,-.2px)} 50%{transform:translate(14px,.9px)} 100%{transform:translate(22px,-.2px)} }
@keyframes bshy-wave-drift-front{ 0%{transform:translate(-28px, 0)} 50%{transform:translate(18px,-1px)} 100%{transform:translate(28px, 0)} }
@keyframes bshy-liquid-breathe  { 0%,100%{filter:none} 50%{filter:brightness(1.05)} }

.bshy-battery__overlay{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  text-align:center;
  pointer-events:none;
  padding: 14px;
}
.bshy-battery__hours{
  font-size: 30px;
  font-weight: 900;
  color: #111;
}
.bshy-battery__note{
  margin-top: 6px;
  font-size: 14px;
  color: rgba(17,17,17,0.70);
  font-weight: 800;
}

/* buttons vertical */
.bshy-buttons{
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-width: 160px;
}

.bshy-btn{
  direction: rtl;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--bshy-btn-border);
  background: var(--bshy-btn-bg);
  color: var(--bshy-btn-text) !important;
  cursor:pointer;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.bshy-btn:hover{ transform: translateY(-1px); }
.bshy-btn__label{ font-weight: 900; }

.bshy-btn__zap{
  opacity: 0;
  color: var(--bshy-accent);
  transform: translateX(2px);
  transition: opacity .2s ease, transform .2s ease;
}

.bshy-btn.is-active{
  background: var(--bshy-btn-active-bg);
  border-color: var(--bshy-btn-active-border);
  color: var(--bshy-btn-active-text);
}
.bshy-btn.is-active .bshy-btn__zap{ opacity:1; transform: translateX(0); }

/* footer */
.bshy-card__footer{
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display:flex;

  /* مهم: برای align دقیق (چپ/وسط/راست) در RTL */
  direction: ltr;
  justify-content: flex-start;
}

.bshy-show{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  text-decoration:none !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.06)), var(--bshy-show-bg) !important;
  color: var(--bshy-show-text) !important;
  box-shadow: 0 14px 26px rgba(34,168,90,0.25) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  min-width: 210px !important;
}

@media (max-width: 900px){
  .bshy-controls-row{ justify-content:center; }
  .bshy-card__footer{ justify-content:center; }
}