/* Define a custom property with a specific syntax */
@property --p {
  syntax: '<number>'; /* Define the expected type */
  inherits: true;
  initial-value: 0;
}

/* Style for the percentage display element */
.persent {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 30px;
  height: 30px;
  border: 2px solid #fff; /* Use shorthand hex color code */
  display: inline-grid;
  place-content: center;
  font-weight: bold;
  font-family: sans-serif;
  border-radius: 50%;
  background-color: rgba(231, 231, 231, 0.422);
  font-size: 12px;
  box-shadow: 2px 5px 6px rgba(143, 143, 143, 0.5); /* Use rgba for consistent color opacity */
}

/* Before and after pseudo-elements for the percentage display */
.persent::before,
.persent::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* Style for the pie chart */
.pie {
  --p: 10; /* Default percentage */
  --b: 15%; /* Border size */
  --c: rgb(254, 0, 0); /* Color of the pie */
  --w: 100%; /* Width */
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  font-weight: bold;
  font-family: sans-serif;
  border-radius: 50%;
}

/* Before and after pseudo-elements for the pie chart */
.pie::before,
.pie::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* Pie chart background gradient */
.pie::before {
  inset: 0;
  background: 
    radial-gradient(farthest-side, var(--c) 98%, transparent) top/var(--b) var(--b) no-repeat,
    conic-gradient(from 0deg, var(--c) 1%, #FCE945 calc(var(--p) * 0.5%), #00fe08 calc(var(--p) * 1%), #9b9b9b 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(99% - var(--b)), #000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side, transparent calc(99% - var(--b)), #000 calc(100% - var(--b)));
}


/* Animation for the pie chart */
.animate {
  animation: p 1s 0.5s both;
}

/* Modify styles for non-rounded charts */
.no-round::before {
  background-size: 0 0, auto;
}

.no-round::after {
  content: none;
}

/* Keyframes for the animation */
@keyframes p {
  from {
    --p: 0;
  }
}


/* //////////////////////////////////////////////////////////////// */
  /* ===== Radial Chart (Responsive) ===== */

  /* فقط روی ناحیه‌ی شارژ */
.radial, .radial *{
  -webkit-touch-callout: none;   /* iOS/Android: منوی لانگ‌پرس */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.radial img{
  -webkit-user-drag: none;       /* جلوگیری از کشیدن تصویر */
  pointer-events: none;           /* رویدادها به کانتینر می‌رسند */
}
  .radial{
    touch-action: pan-y;
    /* تنظیمات */
    --size-pct: 80;          /* درصد از عرض کارت (۰..۱۰۰) */
    --thickness: 6px;        /* ضخامت حلقه (px یا %) */
    --p: 72;                 /* درصد مقدار (۰..۱۰۰) */
    --deg: calc(var(--p) * 3.6deg);

    position:relative;
    z-index: 2;
    width: min(100%, calc(var(--size-pct) * 1%)); /* عرضِ درصدی نسبت به کارت */
    aspect-ratio: 1 / 1;                          /* مربعی نگه می‌دارد */
    border-radius:50%;
    background: conic-gradient(#ffd000 var(--deg), #dddddd 0);
    display:grid; place-items:center;
    margin-inline:auto;
    padding: 5px;
  }
  /* سوراخ وسط (دونات) */
  .radial::before{
    content:"";
    position:absolute; inset: var(--thickness);  /* می‌تواند px یا % باشد */
    background:#ececec; border-radius:50%;
  }
  /* متن وسط */
  .radial .value{ position:relative; z-index:1; font-size: 22px; font-weight: 800; }
  .sub  { position:relative; z-index:0; color:#aab0b8;border-radius:50%;overflow: hidden; }

  /* ===== شعله روی نوک آرک (داینامیک) ===== */
  .marker{
    --flame-size: 8px;
    position:absolute; inset:0;
    z-index: 2;
    transform: rotate(var(--deg));
    transform-origin: 50% 50%;
    pointer-events:none;
  }
  /* سوییچ ON/OFF */
  .radial .marker{ display:none; }                   /* خاموش پیش‌فرض */
  .radial[data-flame="on"] .marker{ display:block; } /* روشن */

  /* خودِ شعله: مرکز روی خط میانی حلقه */
  .marker::after{
    content:"";
    position:absolute;
    left: 50%;
    top:  calc(var(--thickness) / 2);
    width: var(--flame-size); height: var(--flame-size);
    border-radius:50%;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 45% 45%,
        #fff 0 22%,
        #ffd34d 30%,
        #ff7a00 62%,
        #0000 68%);
    filter:
      blur(.2px)
      drop-shadow(0 0 3px #ffb300)
      drop-shadow(0 0 8px #ff7a00);
    animation: flame-flicker 180ms linear infinite alternate;
  }
  /* جرقه‌های کوچک (اختیاری) */
  .marker::before{
    content:"";
    position:absolute;
    left: 50%;
    top:  calc(var(--thickness) / 2);
    width: max(2px, calc(var(--flame-size) * .22));
    height:max(2px, calc(var(--flame-size) * .22));
    background:#ffd34d; border-radius:50%;
    transform: translate(-50%, calc(-50% - var(--flame-size) * .55));
    box-shadow:
      0 calc(var(--flame-size) * -0.9) 0 0 rgba(255,211,77,.9),
      calc(var(--flame-size) * .55) calc(var(--flame-size) * -.6) 0 0 rgba(255,140,0,.85),
      calc(var(--flame-size) * -.6)  calc(var(--flame-size) * -.45) 0 0 rgba(255,230,170,.75);
    opacity:.85; animation: spark 320ms ease-in-out infinite alternate;
  }

  @keyframes flame-flicker{
    0%{ transform: translate(-50%, -50%) scale(.9) rotate(-6deg);
        filter: drop-shadow(0 0 2px #ffb300) drop-shadow(0 0 6px #ff7a00);}
    100%{ transform: translate(-50%, -50%) scale(1.15) rotate(6deg);
          filter: drop-shadow(0 0 6px #ffd34d) drop-shadow(0 0 12px #ff9a00);}
  }
  @keyframes spark{
    to{ transform: translate(-50%, calc(-50% - var(--flame-size) * .75)) scale(1.2);
        opacity:.25; filter: blur(.35px);}
  }

/* //////////////////////////////////////////////////////////////// */


.cardChartAll{
  padding: 10px;
  width: 100%;
  height: auto;
}

.sliderChart{
  width: 100%;
  padding: 10px;
  z-index: 10;
  height: auto;
  position: relative;
  border-top-left-radius: 25px 25px;
  border-top-right-radius: 25px 25px;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: cover; 
}

[type=radio] {
  display: none;
}

.reFont {
  display: flex;
  font-family: 'Times New Roman', Times;
  font-size: 4vw;
  font-weight: 900;
  justify-content: center;
  align-items: center;
  color: rgb(33, 33, 33);
}
.reFontAll {
  display: flex;
  font-family: 'Times New Roman', Times;
  font-size:3vw;
  font-weight: 900;
  justify-content: center;
  align-items: center;
  color: rgb(33, 33, 33);
}
.prFontAll{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:3vw;
  font-weight: 700;
  color: rgb(17, 17, 17);

}
#sliderChart {
  position: relative;
  width: 80%;
  height: 45vw;
  max-width: 600px;
  margin:  auto;
  font-family: 'Helvetica Neue', sans-serif;
  perspective: 1400px;
  transform-style: preserve-3d;
}

#sliderChartL{
  position: absolute;
  display: flex;
  justify-content: center;  /* ✅ وسط‌چین افقی */
  align-items: center;  /* ✅ وسط‌چین عمودی */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(254, 255, 206, 0.419); /* لایه نیمه‌شفاف */
  top:100px;
  right: 20px;
  pointer-events: none; /* ✅ کلیک‌ها را عبور می‌دهد */
  cursor: pointer; /* نشانگر موس را به شکل دست تغییر می‌دهد */
}
#sliderChartR{
  position: absolute;
  display: flex;
  justify-content: center;  /* ✅ وسط‌چین افقی */
  align-items: center;  /* ✅ وسط‌چین عمودی */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(254, 255, 206, 0.419); /* لایه نیمه‌شفاف */
  top:100px;
  left: 20px;
  pointer-events: none; /* ✅ کلیک‌ها را عبور می‌دهد */
  cursor: pointer; /* نشانگر موس را به شکل دست تغییر می‌دهد */
}
@media (max-width: 1000px) {
#sliderChartL{
  display: none;
}
#sliderChartR{
  display: none;
}
}

#sliderChart label {
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  will-change: transform, opacity;
}

.slide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(50%, 0, -300px);
  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* اسلاید فعال */
#s1:checked ~ #slide1,
#s2:checked ~ #slide2,
#s3:checked ~ #slide3,
#s4:checked ~ #slide4,
#s5:checked ~ #slide5,
#s6:checked ~ #slide6,
#s7:checked ~ #slide7 {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 4px 4px 0 rgba(0,0,0,.3), 0 4px 10px 0 rgba(0,0,0,.2);
  opacity: 1;
  z-index: 10; /* حذف محدودیت z-index */

}

/* اسلاید بعدی */
#s1:checked ~ #slide2,
#s2:checked ~ #slide3,
#s3:checked ~ #slide4,
#s4:checked ~ #slide5,
#s5:checked ~ #slide6,
#s6:checked ~ #slide7,
#s7:checked ~ #slide1 {
  transform: translate3d(15%, 0, -100px);
  box-shadow: 0 4px 4px 0 rgba(0,0,0,.3), 0 4px 10px 0 rgba(0,0,0,.2);
  opacity: 1;
  visibility: visible;
  z-index: 10; /* حذف محدودیت z-index */

}

/* اسلاید دوم بعدی (مخفی) */
#s1:checked ~ #slide3,
#s2:checked ~ #slide4,
#s3:checked ~ #slide5,
#s4:checked ~ #slide6,
#s5:checked ~ #slide7,
#s6:checked ~ #slide1,
#s7:checked ~ #slide2 {
  transform: translate3d(30%, 0, -200px);
  opacity: 0;
  pointer-events: none;
}

/* اسلاید سوم بعدی (مخفی) */
#s1:checked ~ #slide4,
#s2:checked ~ #slide5,
#s3:checked ~ #slide6,
#s4:checked ~ #slide7,
#s5:checked ~ #slide1,
#s6:checked ~ #slide2,
#s7:checked ~ #slide3 {
  transform: translate3d(50%, 0, -300px);
  opacity: 0;
  pointer-events: none;
}

/* اسلاید قبلی */
#s1:checked ~ #slide7,
#s2:checked ~ #slide1,
#s3:checked ~ #slide2,
#s4:checked ~ #slide3,
#s5:checked ~ #slide4,
#s6:checked ~ #slide5,
#s7:checked ~ #slide6 {
  transform: translate3d(-15%, 0, -100px);
  box-shadow: 0 4px 4px 0 rgba(0,0,0,.3), 0 4px 10px 0 rgba(0,0,0,.2);
  opacity: 1;
  z-index: 10; /* حذف محدودیت z-index */

}

/* اسلاید دوم قبلی (مخفی) */
#s1:checked ~ #slide6,
#s2:checked ~ #slide7,
#s3:checked ~ #slide1,
#s4:checked ~ #slide2,
#s5:checked ~ #slide3,
#s6:checked ~ #slide4,
#s7:checked ~ #slide5 {
  transform: translate3d(-30%, 0, -200px);
  opacity: 0;
  pointer-events: none;
}

/* اسلاید سوم قبلی (مخفی) */
#s1:checked ~ #slide5,
#s2:checked ~ #slide6,
#s3:checked ~ #slide7,
#s4:checked ~ #slide1,
#s5:checked ~ #slide2,
#s6:checked ~ #slide3,
#s7:checked ~ #slide4 {
  transform: translate3d(-50%, 0, -300px);
  opacity: 0;
  pointer-events: none;
}

#slide1 { background: #ffffff }
#slide2 { background: #ffffff }
#slide3 { background: #ffffff }
#slide4 { background: #ffffff }
#slide5 { background: #ffffff }
#slide6 { background: #ffffff }
#slide7 { background: #ffffff;}

#itemSlide7{
  width: 90%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 ستون */
  grid-template-rows: repeat(2, 1fr); /* 2 ردیف */
  gap: 15px; /* فاصله بین بخش‌ها */
  padding: 10px;
  border-radius: 10px;
  margin: auto;

}

.itemSlide7{
  color: rgb(16, 16, 16);
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;

}



.lottery{
  margin: auto;
  margin-top:5px;
  margin-left:5px;
  overflow: hidden;
  text-align: center;
  font-weight: 100;
  color: #000000;
  font-size: 12px;
  border-radius: 50%;
  border: #eeeeee;  border-style: solid;
  border-width: 6px;
  background-color: #eeeeee;
}
.lotteryAll{
  margin: auto;
  overflow: hidden;
  text-align: center;
  font-weight: 100;
  color: #000000;
  font-size: 12px;
  border-radius: 50%;
  border: #eeeeee;  border-style: solid;
  border-width: 6px;
  background-color: #eeeeee;
}

.chartCard{
  position: relative;
  width: 80%;

}
.chartTxt{
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}
.chartTxt >div{
position: relative;
}
.cardTxt{
  position: fixed;bottom: 0px; padding: 5vw;
}
.cardChartTxt{
  position: relative;
  bottom: 6px;
  width: 100%;
  text-align: right;
  font-size: 12px;
}
.cardChartTxt::first-letter {
  font-size: 13px; /* اندازه بزرگ‌تر */
  font-weight: bold; /* ضخامت بیشتر */
  color: #4CAF50; /* رنگ متفاوت */
}
.TrsrfRwrds{
  width: 100%;
  font-weight: 900;
  text-align:left;
  padding-top: 5px;
  padding-left: 10px;
  font-size: 13px;
}

/* //////////////////////////////////////////////////////////////// */