/* ================== */
/* Card Styles        */
/* ================== */

/* --- Modern Card (Base/Generic Card Style) --- */
.modern-card {
  background-color: var(--card-background);
  border-radius: 16px; /* Softer radius */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Softer, more diffuse shadow */
  border: 1px solid var(--border-color); /* Defined edge */
  overflow: hidden; /* To contain elements like headers */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Smoother transition */
}

.modern-card:hover {
  transform: translateY(-6px); /* Slightly more lift */
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1); /* Enhanced hover shadow */
}

.card-header { /* Optional header for modern-card */
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); /* Adjusted angle */
  padding: 1.75rem; /* Increased padding */
  color: white;
}
.card-header h3 { /* Ensure heading in card header uses appropriate color/margin */
    color: white;
    margin-bottom: 0;
}

.card-body { /* Optional body for modern-card */
  padding: 1.75rem;
}

.card-footer { /* Optional footer for modern-card */
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--border-color);
  background-color: rgba(0, 0, 0, 0.015); /* Very subtle background */
}


/* --- Triple Item Card (From Triple Threat Section) --- */
.triple-item {
  background-color: var(--card-background);
  border-radius: 16px;
  padding: 2.5rem; /* Uniform padding */
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  display: flex;
  flex-direction: column;
  height: 100%; 
}

.triple-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.triple-icon-container {
  width: 90px; /* Slightly smaller container */
  height: 90px;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  border-radius: 24px; /* Squircle shape */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.75rem;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  box-shadow: 0 4px 10px rgba(var(--primary-color-rgb), 0.2);
}

.triple-item:hover .triple-icon-container {
  transform: scale(1.1) rotate(3deg); /* More subtle rotation */
  box-shadow: 0 6px 15px rgba(var(--primary-color-rgb), 0.3);
}

.triple-icon {
  font-size: 2.75rem; /* Adjusted icon size */
  color: white;
}

.triple-item h3 {
  font-size: 1.6rem; /* Adjusted heading size */
  margin-bottom: 0.8rem;
  color: var(--text-color);
  font-weight: 600; /* Ensure it's semi-bold if not default from h3 */
}

.triple-item p {
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  flex-grow: 1;
  font-size: 0.95rem; /* Slightly smaller main paragraph */
}

.feature-list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-top: auto;
}

.feature-list li {
  margin-bottom: 0.6rem; /* Increased spacing */
  display: flex;
  align-items: flex-start; /* Align icon with top of text for multi-line items */
  gap: 0.85rem; /* Increased gap */
  color: var(--text-light);
  font-size: 0.9rem; 
}

.feature-list li i {
  color: var(--primary-color);
  font-size: 0.85rem;
  margin-top: 0.2em; /* Align check with text better */
  flex-shrink: 0; /* Prevent icon from shrinking */
}


/* --- Pricing Card --- */
.pricing-card {
  max-width: 480px; /* Slightly adjusted width */
  margin: 2rem auto;
  background-color: var(--card-background);
  border-radius: 18px; /* More pronounced radius */
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.pricing-header {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  padding: 2.5rem 2rem; /* Increased padding */
  color: white;
  text-align: center;
}

.pricing-header h3 {
  font-size: 1.8rem; /* Adjusted size */
  margin-bottom: 0.75rem; /* Adjusted margin */
  color: white;
  font-weight: 600;
}

.price-tag {
  font-size: 2.8rem; /* Adjusted size */
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.25rem; /* Space before per month */
}

.price-tag span { 
  font-size: 1rem; /* Adjusted size */
  font-weight: 400;
  opacity: 0.85;
}

.pricing-features {
  padding: 2.5rem 2rem; /* Increased padding */
}
.pricing-features h4 { /* Title for feature list */
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1.25rem;
    text-align: center;
}

.pricing-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-features li {
  margin-bottom: 0.9rem; /* Adjusted spacing */
  display: flex;
  align-items: center;
  gap: 0.9rem; /* Adjusted gap */
  font-size: 1rem; /* Adjusted size */
  color: var(--text-color); /* Ensure good contrast */
}

.pricing-features li i {
  color: var(--primary-color);
  font-size: 1.1em; /* Make check icon slightly larger than text */
  flex-shrink: 0;
}

.pricing-cta {
  padding: 0 2rem 2.5rem; /* Increased bottom padding */
  text-align: center;
}
/* Ensure button inside pricing CTA is prominent */
.pricing-card .pricing-cta .primary-button {
    padding: 0.9rem 2.2rem; /* Custom padding for this specific button */
    font-size: 1.05rem; /* Custom font size */
}

.trial-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-light);
}


/* --- Testimonial Card --- */
.testimonial {
  background-color: var(--card-background);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure equal height in a grid */
}

.testimonial:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
  margin-bottom: 1.5rem;
  flex-grow: 1; /* Allow content to push author down */
}

.testimonial-content p {
  font-style: italic;
  color: var(--text-light); /* Lighter for quote */
  line-height: 1.7; /* More leading for italic text */
  position: relative;
  padding-left: 2.5rem; /* Space for quote mark */
  font-size: 0.95rem;
}

.testimonial-content p::before {
  content: '“'; /* Using opening quote */
  font-family: 'Georgia', serif; /* More traditional quote font */
  font-size: 4rem; /* Larger quote mark */
  color: rgba(var(--primary-color-rgb), 0.25); /* Themed, more transparent */
  position: absolute;
  top: -0.5rem; 
  left: 0;
  line-height: 1;
  z-index: 0; /* Behind text, but not necessary if padding handles overlap */
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto; /* Pushes author to bottom if content is short */
  padding-top: 1rem; /* Space above author if content is long */
  border-top: 1px solid var(--border-color); /* Separator */
}

.testimonial-avatar {
  width: 55px; /* Slightly smaller avatar */
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color);
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.testimonial-info {
  text-align: left;
}

.testimonial-info h4 {
  margin: 0 0 0.15rem 0; /* Reduced bottom margin */
  font-size: 1.05rem;
  color: var(--text-color);
  font-weight: 600;
  line-height: 1.3;
}

.testimonial-info p { /* Author title/description */
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: normal; /* Override italic from content's p */
  padding-left: 0; /* Reset padding from content's p */
}
.testimonial-info p::before {
    display: none; /* Remove quote from author title */
}


/* --- Feature Card (From Feature Grid) --- */
.feature {
  background-color: var(--card-background);
  border-radius: 12px; /* Standard radius */
  padding: 2rem; /* Adjusted padding */
  text-align: center;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon { /* This is the <i> or <img> tag itself */
  font-size: 2.8rem; /* Icon size */
  color: var(--primary-color);
  margin-bottom: 1.25rem;
  /* Container for icon, if needed, can be a separate div */
  /* For direct icon styling: */
  display: inline-block; /* Or block with auto margins for centering */
  transition: transform 0.3s ease-out;
}
/* If .feature-icon is a container div: */
/* .feature-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  background-color: rgba(var(--primary-color-rgb), 0.1);
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.feature:hover .feature-icon {
  transform: scale(1.1);
  background-color: rgba(var(--primary-color-rgb), 0.15);
}
.feature:hover .feature-icon i (if icon is inside) {
  transform: rotate(5deg);
}
*/
.feature:hover .feature-icon { /* For direct icon styling */
  transform: scale(1.15) rotate(-3deg);
}


.feature h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: var(--text-color);
  font-weight: 600;
}

.feature p {
  color: var(--text-light);
  line-height: 1.6;
  font-size: 0.9rem;
  flex-grow: 1;
}


/* --- Progress Item Card --- */
.progress-item {
  background-color: var(--card-background);
  padding: 1.75rem; /* Adjusted padding */
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.progress-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.progress-item h3 {
  margin-bottom: 1rem; /* Adjusted margin */
  color: var(--text-color);
  font-size: 1.2rem; /* Adjusted size */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Increased gap */
}

/* Progress Icons using pseudo-elements with better alignment */
.progress-item h3::before {
  font-size: 1.2em; /* Relative to h3 font size */
  line-height: 1;
}
.progress-item.beginner h3::before { content: '🎯'; }
.progress-item.nutrition h3::before { content: '🥗'; }
.progress-item.mental h3::before { content: '🧠'; }

.progress-bar-container {
  background-color: var(--border-color);
  border-radius: 20px; /* Pill shape */
  overflow: hidden;
  height: 12px; /* Slightly thicker */
  margin: 1.25rem 0; /* Adjusted margin */
  position: relative;
}

.progress-bar {
  height: 100%;
  border-radius: 20px; /* Match container */
  background: linear-gradient(
    90deg,
    var(--gradient-start) 0%,
    var(--gradient-middle) 50%,
    var(--gradient-end) 100%
  );
  transition: width 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother animation */
  width: 0%; /* Start at 0, set width via inline style or JS */
}

.progress-item p { /* Text below progress bar */
  color: var(--text-light);
  font-size: 0.9rem; /* Adjusted size */
  margin-top: 0.75rem; /* Adjusted margin */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-percentage { /* Percentage value */
  color: var(--primary-color);
  font-weight: 700; /* Bolder percentage */
  font-size: 1.1rem; /* Adjusted size */
}


/* --- Social Post Card --- */
.social-post {
  display: flex; 
  background-color: var(--card-background);
  padding: 1.25rem; /* Adjusted padding */
  margin-bottom: 1.5rem; 
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.social-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

.friend-avatar {
  width: 50px; /* Slightly smaller */
  height: 50px;
  border-radius: 50%;
  margin-right: 1.25rem;
  object-fit: cover;
  border: 2px solid var(--primary-color); /* Thinner border */
  flex-shrink: 0;
}

.post-content {
  flex: 1;
  text-align: left;
}

.friend-name {
  font-size: 1.1rem; /* Adjusted size */
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.25rem; /* Reduced margin */
}

.achievement { /* The actual post content */
  color: var(--text-light);
  margin-bottom: 0.5rem;
  line-height: 1.5;
  font-size: 0.9rem; /* Adjusted size */
}

.timestamp {
  font-size: 0.8rem; /* Adjusted size */
  color: var(--text-light);
  opacity: 0.8; /* Subtler timestamp */
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.timestamp i {
    font-size: 0.9em; /* Icon relative to timestamp text */
}


/* --- Explore Item Card --- */
.explore-item {
  background-color: var(--card-background);
  border-radius: 16px;
  padding: 2rem; /* Adjusted padding */
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.explore-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.explore-icon { /* Circular icon container */
  width: 70px; /* Adjusted size */
  height: 70px;
  margin: 0 auto 1.25rem; /* Adjusted margin */
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem; /* Adjusted icon size */
  box-shadow: 0 3px 8px rgba(var(--primary-color-rgb),0.25);
}

.explore-item h3 {
  color: var(--text-color);
  font-size: 1.4rem; /* Adjusted size */
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.explore-item p {
  color: var(--text-light);
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-size: 0.9rem;
  flex-grow: 1;
}

.learn-more { 
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem; /* Adjusted size */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem; /* Adjusted gap */
  transition: gap 0.3s ease, color 0.3s ease;
  margin-top: auto; /* Push to bottom */
  padding: 0.5rem 0; /* Add some padding for click area */
}

.learn-more:hover {
  gap: 0.7rem; /* Increase gap on hover */
  color: var(--secondary-color);
  /* text-decoration: underline; Keep no underline for cleaner look */
}

.learn-more i {
  transition: transform 0.3s ease;
  font-size: 1em; /* Icon size relative to text */
}

.learn-more:hover i {
  transform: translateX(4px);
}


/* --- Dashboard Card --- */
.dashboard-card {
  background-color: var(--card-background);
  border-radius: 12px;
  padding: 1.75rem; /* Adjusted padding */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.dashboard-card h3 {
  margin-bottom: 1rem;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.6rem; /* Adjusted gap */
  font-size: 1.25rem; /* Adjusted size */
  font-weight: 600;
}
.dashboard-card h3 i { /* Icon in dashboard card heading */
    font-size: 1.1em; /* Relative to h3 font size */
    color: var(--primary-color); /* Theme color for icon */
}

.dashboard-card p {
  color: var(--text-light);
  margin-bottom: 1.25rem; /* Adjusted margin */
  font-size: 0.9rem;
}


/* --- Profile Stat Card --- */
.profile-stat {
  background-color: var(--card-background);
  padding: 1.25rem; /* Adjusted padding */
  border-radius: 10px; /* Slightly less radius */
  text-align: center;
  min-width: 140px; /* Adjusted min-width */
  flex: 1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-color);
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.profile-stat:hover {
  transform: translateY(-4px); 
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.stat-number {
  font-size: 1.8rem; /* Adjusted size */
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.25rem; /* Reduced margin */
  line-height: 1.2;
}

.stat-name {
  color: var(--text-light);
  font-size: 0.8rem; /* Adjusted size */
  font-weight: 500; /* Make stat name slightly bolder */
  text-transform: uppercase; /* Uppercase for stat name */
  letter-spacing: 0.05em; /* Add letter spacing */
}


/* --- Responsive Card Styles --- */
@media (max-width: 768px) {

  .modern-card, .triple-item, .pricing-card, .testimonial, .feature, .progress-item, .explore-item, .dashboard-card, .profile-stat, .social-post {
      border-radius: 12px; /* Consistent smaller radius on mobile */
  }

  /* Stack social post items vertically */
  .social-post {
    flex-direction: column;
    align-items: center; /* Center content */
    text-align: center;
  }

  .friend-avatar {
    margin-right: 0; 
    margin-bottom: 1rem; 
  }

  .post-content {
     width: 100%; 
     text-align: center; 
  }

  /* Adjust testimonial quote */
  .testimonial-content p {
     padding-left: 0; /* Remove left padding for quote */
     text-align: center; /* Center quote text */
  }
  .testimonial-content p::before {
     font-size: 3rem; /* Smaller quote mark */
     top: -1rem;
     left: 50%; /* Center the quote mark */
     transform: translateX(-50%);
  }
  .testimonial-author {
      flex-direction: column; /* Stack avatar and info */
      border-top: none; /* Remove top border if stacked */
      padding-top: 0.5rem;
  }
  .testimonial-info {
      text-align: center;
  }


  /* Adjust pricing card text sizes */
  .pricing-header h3 {
    font-size: 1.6rem;
  }
  .price-tag {
    font-size: 2.2rem;
  }
  .pricing-features li {
    font-size: 0.9rem;
  }


  /* Reduce padding on cards if needed */
  .triple-item, .feature, .progress-item, .explore-item, .dashboard-card, .profile-stat, .testimonial, .pricing-card {
      padding: 1.5rem;
  }
  .triple-item h3, .feature h3, .explore-item h3 {
    font-size: 1.3rem;
  }
  .triple-item p, .feature p, .explore-item p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  .feature-list li {
    font-size: 0.85rem;
    gap: 0.5rem;
  }

   .social-post {
       padding: 1.25rem;
   }
   .stat-number {
       font-size: 1.6rem;
   }
   .stat-name {
       font-size: 0.75rem;
   }
} /* End of @media (max-width: 768px) */

/* --- Value Proposition Card (Pricing Page) --- */
.value-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem; /* Increased space */
}

.value-card {
  background-color: var(--card-background);
  border-radius: 16px; /* Consistent radius */
  padding: 2rem 1.75rem; /* Adjusted padding */
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.07); /* Softer shadow */
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  display: flex;
  flex-direction: column; /* Align content vertically */
}
.value-card:hover {
  transform: translateY(-6px); /* More lift */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.value-card-icon {
  font-size: 2.8rem; /* Larger icon */
  color: var(--primary-color);
  margin-bottom: 1.25rem; /* Increased space */
  display: inline-block;
  line-height: 1; /* Ensure icon doesn't add extra space */
}

.value-card h3 {
  font-size: 1.4rem; /* Adjusted size */
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-color);
}

.value-card p {
  font-size: 0.9rem; /* Smaller descriptive text */
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 0.5rem; /* Default margin for main p */
  flex-grow: 1; /* Allow main p to take space */
}
.value-card .estimated-value {
  font-size: 0.85rem; /* Smaller estimate */
  color: var(--text-light);
  font-style: italic;
  margin-top: auto; /* Push to bottom */
  padding-top: 1rem; /* Space above if content is short */
  opacity: 0.8;
  margin-bottom: 0; /* Remove bottom margin for this specific p */
}

/* Pricing card specific overrides (already in cards.css, ensure they are sufficient) */
.pricing-card .price-billing-note {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 0.5rem;
    color: white; /* If on dark header */
}
.pricing-card .features-title {
    text-align:center;
    margin-bottom: 1.5rem;
    font-size: 1.1rem; /* Was 1.2rem */
    font-weight: 600;
    color: var(--text-color);
}