.no-x-scroll, html, body {
  overflow-x: hidden;
}
/* تم الاستغناء عن الغلاف المخصص لصالح فصول Tailwind (w-full max-w-screen-md mx-auto px-4) */
.text-main {
  color: #f97316;
}

.form-input {
  padding: 0.75rem;
  border-radius: 0.5rem;
  border-width: 1px;
}
 
.big-btn {
 --glow-color: rgb(217, 176, 255);
 --glow-spread-color: rgba(191, 123, 255, 0.781);
 --enhanced-glow-color: rgb(231, 206, 255);
 --btn-color: rgb(100, 61, 136);
 border: .25em solid var(--glow-color);
 color: var(--glow-color);
 font-size: 20px;
 font-weight: bold;
 background-color: var(--btn-color);
 border-radius: 1em;
 height: 50px;
 outline: none;
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 1em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
 text-shadow: 0 0 .5em var(--glow-color);
 transition: all 0.3s;
  position: relative; /* لضبط ::after داخل الزر */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* منع تمدد الصفحة بسبب التوهج */
}

.big-btn::after {
 pointer-events: none;
 content: "";
 position: absolute;
 top: 120%;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: var(--glow-spread-color);
 filter: blur(2em);
 opacity: .7;
 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
}

.big-btn:hover {
 color: var(--btn-color);
 background-color: var(--glow-color);
 box-shadow: 0 0 1em .25em var(--glow-color),
        0 0 4em 2em var(--glow-spread-color),
        inset 0 0 .75em .25em var(--glow-color);
}

.big-btn:active {
 box-shadow: 0 0 0.6em .25em var(--glow-color),
        0 0 2.5em 2em var(--glow-spread-color),
        inset 0 0 .5em .25em var(--glow-color);
}

.good-btn {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid purple;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.good-btn:hover {
  color: white;
}

.good-btn::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background-color: purple;
  z-index: -1;
  transition: all 1s;
}

.good-btn:hover::before {
  width: 160%;
}

.bad-btn {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #dc2626;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.bad-btn:hover {
  color: white;
}

.bad-btn::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background-color: #dc2626;
  z-index: -1;
  transition: all 1s;
}

.bad-btn:hover::before {
  width: 160%;
}

.normal-btn {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #ea580c;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.normal-btn:hover {
  color: white;
}

.normal-btn::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background-color: #ea580c;
  z-index: -1;
  transition: all 1s;
}

.normal-btn:hover::before {
  width: 160%;
}

.conf-back {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid purple;
  background-color: purple !important;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.conf-bad {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #dc2626;
  background-color: #dc2626 !important;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.conf-good {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #22c55e;
  background-color: #22c55e !important;
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.table-bad {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #dc2626;
  background-color: #dc2626 !important;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.table-good {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #22c55e;
  background-color: #22c55e !important;
  padding-right: 3px;
  padding-left: 3px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.all-back {
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #ea580c;
  background-color: #ea580c !important;
  padding: 5px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.chart-bar {
  width: 0%;
  transition: width 0.5s ease-in-out;
}

/* Generate width classes from 0% to 100% in steps of 5% */
.chart-width-0 { width: 0%; }
.chart-width-5 { width: 5%; }
.chart-width-10 { width: 10%; }
.chart-width-15 { width: 15%; }
.chart-width-20 { width: 20%; }
.chart-width-25 { width: 25%; }
.chart-width-30 { width: 30%; }
.chart-width-35 { width: 35%; }
.chart-width-40 { width: 40%; }
.chart-width-45 { width: 45%; }
.chart-width-50 { width: 50%; }
.chart-width-55 { width: 55%; }
.chart-width-60 { width: 60%; }
.chart-width-65 { width: 65%; }
.chart-width-70 { width: 70%; }
.chart-width-75 { width: 75%; }
.chart-width-80 { width: 80%; }
.chart-width-85 { width: 85%; }
.chart-width-90 { width: 90%; }
.chart-width-95 { width: 95%; }
.chart-width-100 { width: 100%; }