/* ======================================================
   🧾 PRICING SECTION (FULL VARIABLE SYSTEM)
   ====================================================== */

.pricing-section {
  padding: 96px 0;
  background-color: var(--pricing-bg);
  color: var(--pricing-text);
}

/* Section Heading */
.pricing-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.pricing-header p {
  color: var(--pricing-subtext);
  margin-bottom: 96px;
  font-size: 16px;
  line-height: 1.45;
}

/* ======================================================
   🧱 BASE CARD STRUCTURE
   ====================================================== */
.pricing-card {
  border-radius: 16px;
  padding: 56px 45px ;
  text-align: center;
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid var(--pricing-border);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* @media (max-width: 768px) {
  .pricing-card {
    text-align: left;
  }
} */


/* ======================================================
   🌗 THEME VARIABLES (MASTER TOKENS)
   ====================================================== */

/* dark THEME */
html[data-theme="dark"] {
  --pricing-bg: #212124;
  --pricing-text:#E9E9EE;
  --pricing-subtext: #97979C;
  --card-bg: #242426;
  --card-border: #313134;
  --card-text: #E9E9EE;
  --pricing-border: #313134;

  /* 🟩 FREE TRIAL VARIABLES */
  --free-title-color: #6EDD9C;
  --free-subtitle-color: #B5B5B9;
  --free-price-color: #F5F5F5;
  --free-period-color: #747478;
  --free-feature-color: #111e30;
  --free-checkmark-color: #4CAF50;
  --free-button-text: #478CD1;
  --free-button-bg: #242426;
  --free-button-border: #478CD1;

  /* 🔵 PROFESSIONAL VARIABLES */
  --pro-bg-gradient:linear-gradient(180deg, #416F9C 0%, #061F39 162.38%);

  --pro-title-color: #FFFFFF;
  --pro-subtitle-color: #FCFCFC;
  --pro-price-color:#FFFFFF;
  --pro-period-color: #CECECF;
  --pro-feature-color: #FFFFFF;
  --pro-checkmark-color: #6EDD9C;
  --pro-button-bg: #FFFFFF;
  --pro-button-text: #478CD1;

  /* ⚫ ENTERPRISE VARIABLES */
  --ent-title-color: #F5F5F5;
  --ent-subtitle-color: #B5B5B9;
  --ent-price-color: #F5F5F5;
  --ent-period-color: #747478;
  --ent-feature-color: #E9E9EE;
  --ent-checkmark-color: #4CAF50;
  --ent-button-bg: #242426;
  --ent-button-text: #478CD1;
  --ent-button-border: #478CD1;
}

/* light THEME */
html[data-theme="light"] {
  --pricing-bg: #f9fafb;
  --pricing-text: #393939;
  --pricing-subtext: #606060;
  --card-bg: #FBFBFB;
  --card-border: #E5E5E5;
  --pricing-border: #E5E5E5;

  /* 🟩 FREE TRIAL VARIABLES */
  --free-title-color: #2F7F4D;
  --free-subtitle-color: #505050;
  --free-price-color: #111827;
  --free-period-color: #818181;
  --free-feature-color: #393939;
  --free-checkmark-color: #4CAF50;
  --free-button-bg: #FBFBFB;
  --free-button-text: #3475B5;
  --free-button-border: #3475B5;

  /* 🔵 PROFESSIONAL VARIABLES */
  --pro-bg-gradient:linear-gradient(180deg, #3475B5 0%, #17334F 162.38%);


  --pro-title-color: #FFFFFF;
  --pro-subtitle-color: #EBEBEB;
  --pro-price-color: #FFFFFF;
  --pro-period-color: #DBDBDB;
  --pro-feature-color: #EBEBEB;
  --pro-checkmark-color: #73C899;
  --pro-button-bg: #FFFFFF;
  --pro-button-text: #3475B5;


  /* ⚫ ENTERPRISE VARIABLES */
  --ent-title-color: #2B2B2B;
  --ent-subtitle-color: #505050;
  --ent-price-color: #111827;
  --ent-period-color: #818181;
  --ent-feature-color: #393939;
  --ent-checkmark-color: #4CAF50;
  --ent-button-bg: #ffffff;
  --ent-button-text: #3475B5;
  --ent-button-border: #3475B5;
}

/* ======================================================
   🟩 FREE TRIAL CARD STYLING
   ====================================================== */
.pricing-card.free-trial .plan-title {
  color: var(--free-title-color);
}
.pricing-card.free-trial .plan-subtitle {
  color: var(--free-subtitle-color);
}
.pricing-card.free-trial .price {
  color: var(--free-price-color);
}
.pricing-card.free-trial .per-month {
  color: var(--free-period-color);
}
.pricing-card.free-trial .features {
  color: var(--free-feature-color);
}
.pricing-card.free-trial .features li::before {
  color: var(--free-checkmark-color);
}
.pricing-card.free-trial .btn-primary {
  background-color: var(--free-button-bg);
  color: var(--free-button-text);
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
}

/* ======================================================
   🔵 PROFESSIONAL CARD STYLING
   ====================================================== */
.pricing-card.professional {
  background: var(--pro-bg-gradient);
  color: var(--pro-feature-color);
  z-index: 2;
  padding-top: 48px;
  padding-bottom: 48px;
  position: relative;
}
.pricing-card.professional .plan-title {
  color: var(--pro-title-color);
}
.pricing-card.professional .plan-subtitle {
  color: var(--pro-subtitle-color);
}
.pricing-card.professional .price {
  color: var(--pro-price-color);
}
.pricing-card.professional .per-month {
  color: var(--pro-period-color);
}
.pricing-card.professional .features li::before {
  color: var(--pro-checkmark-color);
}
.pricing-card.professional .btn-primary {
  background-color: var(--pro-button-bg);
  color: var(--pro-button-text);

  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
}

/* ======================================================
   ⚫ ENTERPRISE CARD STYLING
   ====================================================== */
.pricing-card.enterprise .plan-title {
  color: var(--ent-title-color);
}
.pricing-card.enterprise .plan-subtitle {
  color: var(--ent-subtitle-color);
}
.pricing-card.enterprise .price {
  color: var(--ent-price-color);
}
.pricing-card.enterprise .per-month {
  color: var(--ent-period-color);
}
.pricing-card.enterprise .features {
  color: var(--ent-feature-color);
}
.pricing-card.enterprise .features li::before {
  color: var(--ent-checkmark-color);
}
.pricing-card.enterprise .btn-primary {
  background-color: var(--ent-button-bg);
  color: var(--ent-button-text);

  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
}

/* ======================================================
   📱 RESPONSIVE DESIGN
   ====================================================== */
@media (max-width: 768px) {
  .pricing-card {
    margin-bottom: 24px;
  }
}
@media (max-width: 576px) {
  .pricing-header h2 {
    font-size: 28px;
  }
  .pricing-card .price {
    font-size: 36px;
  }
}

/* ======================================================
   🎯 FIX: Align Middle Card Button with Others
   ====================================================== */

/* Nudge only the Professional card button downward */
.pricing-card.professional .btn-primary {
  position: relative;
  top: 18px; /* Adjust until perfectly aligned visually */
}

/* Reset for mobile/tablet */
@media (max-width: 992px) {
  .pricing-card.professional .btn-primary {
    top: 0;
  }
}


/* ======================================================
    CUSTOMER TESTIMONIALS SECTION (DUAL THEME SYSTEM)
   ====================================================== */

.testimonial-section {
  padding: 96px 0;
  background-color: var(--testimonial-bg);
  color: var(--testimonial-text);
}

/* ---------------- Section Heading ---------------- */
.testimonial-header {
  text-align: center;
  margin-bottom: 48px;
}

.testimonial-header h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--testimonial-title);
}

.testimonial-header p {
  color: var(--testimonial-subtext);
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

/* ---------------- Testimonial Card ---------------- */
.testimonial-card {
  background: var(--testimonial-card-bg);
  color: var(--testimonial-card-text);
  border: 1px solid var(--testimonial-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 420px;
  transition: none; /* no hover animation */
}

/* Video or Image */
.testimonial-video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid var(--testimonial-border);
}

/* ---------------- Content ---------------- */
.testimonial-content {
  padding: 24px;
  text-align: center;
}

.testimonial-content p {
  font-size: 15px;
  color: var(--testimonial-card-text) !important;
  line-height: 1.6;
  font-style: normal; /* ❌ removed italic */
  margin-bottom: 12px;
}

.testimonial-content h5 {
  font-weight: 600;
  color: var(--testimonial-author);
  margin-bottom: 4px;
}

.testimonial-content span {
  font-size: 14px;
  color: var(--testimonial-role);
}

/* ---------------- Button ---------------- */
.btn-see-more {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: var(--testimonial-btn-bg);
  color: var(--testimonial-btn-text);
  border: 1px solid var(--testimonial-btn-border);
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin: 40px auto 0;
}

/* ======================================================
   🌗 THEME VARIABLES
   ====================================================== */

/* ----- Light Theme ----- */
html[data-theme="light"] {
  --testimonial-bg: #f9fafb;
  --testimonial-title: #2b2b2b;
  --testimonial-text: #393939;
  --testimonial-subtext: #606060;

  --testimonial-card-bg: #ffffff;
  --testimonial-card-text: #2b2b2b;
  --testimonial-border: #e5e7eb;
  --testimonial-author: #111827;
  --testimonial-role: #505050;

  --testimonial-btn-bg: #ffffff;
  --testimonial-btn-text: #3475b5;
  --testimonial-btn-border: #3475b5;
}

/* ----- Dark Theme ----- */
html[data-theme="dark"] {
  --testimonial-bg: #212124;
  --testimonial-title: #f5f5f5;
  --testimonial-text: #e9e9ee;
  --testimonial-subtext: #97979c;

  --testimonial-card-bg: #242426;
  --testimonial-card-text: #e9e9ee;
  --testimonial-border: #3c3c42;
  --testimonial-author: #ffffff;
  --testimonial-role: #b5b5b9;

  --testimonial-btn-bg: #242426;
  --testimonial-btn-text: #478cd1;
  --testimonial-btn-border: #478cd1;
}

/* ======================================================
   📱 RESPONSIVE DESIGN
   ====================================================== */
@media (max-width: 992px) {
  .testimonial-card {
    height: auto;
    margin-bottom: 24px;
  }

  .testimonial-video {
    height: 200px;
  }

  .testimonial-content {
    padding: 20px;
  }

  .testimonial-content p {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .testimonial-header h2 {
    font-size: 24px;
  }

  .testimonial-header p {
    font-size: 14px;
  }

  .testimonial-video {
    height: 180px;
  }

  .testimonial-content p {
    font-size: 13.5px;
  }

  .btn-see-more {
    padding: 10px 20px;
    font-size: 14px;
  }
}