/* ===================================================================
   BACKGROUND IMAGE UTILITIES
   Use these classes instead of inline background-image styles
   =================================================================== */

.bg-main {
  background-image: url("../assets/images/main-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-splash {
  background-image: url("../assets/images/splash-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-profile {
  background-image: url("../assets/images/profile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.user-profile {
  background-image: url("../assets/images/user.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
  SCAN PAGE
   =================================================================== */
@keyframes scanLine {
  0% {
    top: 20%;
  }
  50% {
    top: 80%;
  }
  100% {
    top: 20%;
  }
}

.scan-line {
  background: rgba(148, 246, 8, 0.2);
  backdrop-filter: blur(10px);
  animation: scanLine 3.5s ease-in-out infinite;
}

@keyframes scanGlow {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.scan-overlay {
  background: linear-gradient(
    0deg,
    rgba(148, 246, 8, 0.1) 0%,
    rgba(148, 246, 8, 0) 100%
  );
  animation: scanGlow 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* ===================================================================
   SELECT DROPDOWN STYLES

   =================================================================== */

/* Style the select element */
select.input-base,
select.date-input {
  background-color: #191919;
  color: white;

  cursor: pointer;
}

/* Style select on focus */
select.input-base:focus,
select.date-input:focus {
  outline: none;
  border-color: #94f608;
  background-color: #191919;
}

/* Style the dropdown options */
select.input-base option,
select.date-input option {
  background-color: #191919;
  color: white;
  padding: 12px;
}

/* Style selected/hovered option */
select.input-base option:checked,
select.date-input option:checked {
  background-color: #94f608;
  color: #0a0a0a;
}

select.input-base option:hover,
select.date-input option:hover {
  background-color: rgba(148, 246, 8, 0.2);
}

/* Firefox specific */
@-moz-document url-prefix() {
  select.input-base option,
  select.date-input option {
    background-color: #191919;
    color: white;
  }
}
/* ===================================================================
   FAQ ACCORDION COMPONENT
   =================================================================== */

/* Container for each FAQ item */
.faq-item {
  border-radius: 10px;
  border: 1px solid #3d3d3d;
  background: #191919;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Clickable header */
.faq-header {
  display: flex;
  height: 54px;
  padding: 8px 16px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}

.faq-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Question text */
.faq-question {
  color: #868484;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%;
  transition: all 0.3s ease;
}

/* Arrow icon */
.faq-arrow {
  color: #868484;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
  flex-shrink: 0;
}

/* Hidden answer content */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 16px;
}

.faq-content p {
  margin-top: 10px;
  margin-bottom: 16px;
  color: rgba(185, 182, 182, 0.8);
  font-size: 12px;
  line-height: 130%;
  text-align: justify;
}

/* Active state when FAQ is open */
.faq-item.active .faq-question {
  color: #94f608;
  font-size: 16px;
  font-weight: 500;
}

.faq-item.active .faq-arrow {
  color: #94f608;
  transform: rotate(180deg) scale(0.8);
}

.faq-item.active .faq-content {
  max-height: 300px;
}

/* ===================================================================
   SCAN ANIMATIONS
   =================================================================== */

/* Scanning line animation */
@keyframes scanLine {
  0% {
    top: 20%;
  }
  50% {
    top: 80%;
  }
  100% {
    top: 20%;
  }
}

.scan-line {
  background: rgba(148, 246, 8, 0.2);
  backdrop-filter: blur(10px);
  animation: scanLine 3.5s ease-in-out infinite;
}

/* Glow effect animation */
@keyframes scanGlow {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

.scan-overlay {
  background: linear-gradient(
    0deg,
    rgba(148, 246, 8, 0.1) 0%,
    rgba(148, 246, 8, 0) 100%
  );
  animation: scanGlow 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* ===================================================================
   TRAINING CARD BACKGROUNDS
   Used in search results and workout cards
   =================================================================== */

.training-card-bg-1 {
  background-image:
    linear-gradient(
      180deg,
      rgba(26, 26, 26, 0) 58%,
      rgba(22, 22, 22, 0.85) 82%
    ),
    url("../assets/images/training/training1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.training-card-bg-2 {
  background-image:
    linear-gradient(
      180deg,
      rgba(26, 26, 26, 0) 58%,
      rgba(22, 22, 22, 0.85) 82%
    ),
    url("../assets/images/training/training2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   WORKOUT SET BACKGROUNDS
   =================================================================== */

.workout-strength-bg {
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0) 63%,
      rgba(10, 10, 10, 0.5) 100%
    ),
    url("../assets/images/strength.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.workout-exercise-bg {
  background-image:
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0) 63%,
      rgba(10, 10, 10, 0.5) 100%
    ),
    url("../assets/images/exercise.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   SPECIFIC PAGE BACKGROUNDS
   =================================================================== */

.bg-workout-detail {
  background-image: url("../assets/images/detail-workout.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-map {
  background-image: url("../assets/images/map.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-workout-main {
  background-image: url("../assets/images/workout.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   TRAINER PROFILE IMAGES
   =================================================================== */

.trainer-avatar {
  background-image: url("../assets/images/trainers/avatar.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.trainer-profile-bg {
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("../assets/images/trainers/profile.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   CARD IMAGES (Punch, Strong Arm, etc.)
   =================================================================== */

.bg-punch {
  background-image: url("../assets/images/punch.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-strong {
  background-image: url("../assets/images/strong.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   FOOD SCAN IMAGES
   =================================================================== */

.bg-apple {
  background-image: url("../assets/images/apple.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   UTILITY CLASSES FOR POSITIONING
   =================================================================== */

.bottom-n25 {
  bottom: -25px;
}

/* ===================================================================
   GRADIENT BACKGROUNDS
   =================================================================== */

.gradient-card {
  background: linear-gradient(
    273deg,
    #ceff88 0.2%,
    #93c251 39.24%,
    #8ee511 98.19%
  );
}

.gradient-chip {
  background: linear-gradient(180deg, #b7b7b7 0%, #dfd6d6 50.52%, #efe1e1 100%);
}

.gradient-overlay-dark {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0) 7.63%,
    #0a0a0a 59.92%
  );
}

/* ===================================================================
   PLACEHOLDER IMAGE BACKGROUNDS
   =================================================================== */

.bg-placeholder {
  background-image: url("../assets/images/placeholder.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* ===================================================================
   DETAILS WORKOUT IMAGE BACKGROUNDS
   =================================================================== */

.bg-workout-detail1 {
  background-image: url("../assets/images/workouts/workout3.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-workout-detail2 {
  background-image: url("../assets/images/workouts/workout2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-workout-detail3 {
  background-image: url("../assets/images/workouts/workout1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* ===================================================================
   EXERCISE IMAGE BACKGROUNDS
   =================================================================== */

.bg-exercise {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      transparent 100%
    ),
    url("../assets/images/workouts/exersice.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-exercise2 {
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      transparent 100%
    ),
    url("../assets/images/workouts/exersice1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   ONBOARDING BACKGROUNDS
   =================================================================== */

.onboarding-bg-1 {
  background-image: url("../assets/images/onboarding/onboarding1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.onboarding-bg-2 {
  background-image: url("../assets/images/onboarding/onboarding2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.onboarding-bg-3 {
  background-image: url("../assets/images/onboarding/onboarding3.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   WORKOUT IMAGES
   =================================================================== */

.bg-upper-body {
  background-image: url("../assets/images/workouts/upper-body.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-sitt-up {
  background-image: url("../assets/images/workouts/sitt-up.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-workout-1 {
  background-image: url("../assets/images/workout1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-workout-2 {
  background-image: url("../assets/images/workout2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===================================================================
   LOGIN/SIGNUP ILLUSTRATIONS
   =================================================================== */

.bg-login-illustration {
  background-image: url("../assets/images/login-illustration.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-banner-man {
  background-image: url("../assets/images/banner-man.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-trainer-banner-man {
  background-image: url("../assets/images/trainers/banner-man.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================= */
/* Card radio (default payment)  */
/* ============================= */

.card-radio .check-circle {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 2px solid #a9a9a9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

.card-radio .check-circle::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background-color: #94f608;
  transform: scale(0);
  transition: transform 0.2s ease;
}

/* When radio is checked */
.card-radio input:checked + .check-circle {
  border-color: #94f608;
}

.card-radio input:checked + .check-circle::after {
  transform: scale(1);
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   =================================================================== */

@media (max-width: 430px) {
  .faq-question {
    font-size: 13px;
  }

  .faq-item.active .faq-question {
    font-size: 15px;
  }
}