/* ================================
   FEATURES / PRICING CARDS (FULL)
   ================================ */

/* Center images inside the card icon area */
.feature-icon-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* If any legacy wrappers remain, let Bootstrap grid control layout */
.feature-block { 
  display: contents; 
}

/* Pull-up look for the section (adjust as needed) */
.features { 
  margin-top: -70px; 
}

/* Tighten vertical spacing between stacked rows (≥992px) */
@media (min-width: 992px) {
  .features .row + .row { margin-top: 1rem; }
}

/* ----------------
   Card container
   ---------------- */
.feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 40px 30px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 30px 0 rgba(0, 42, 106, 0.1);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(0, 42, 106, 0.12);
}

/* Icon area spacing */
.feature-item .feature-icon {
  margin-bottom: 1rem;
  text-align: center;
}

/* Headings & body text */
.feature-item h4 {
  color: #223a66;
  margin-bottom: 0.75rem;
}

.feature-item p {
  font-size: 14px;
  margin-bottom: 0;
}

/* ----------------
   Feature list
   ---------------- */
.feature-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.75rem 0;
  display: block;
  min-height: 180px; /* default equaliser for row 1 */
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 14px;
}

.feature-list i.fa-check {
  color: #28a745; /* green */
  font-size: 17px;
  line-height: 1.2;
  margin-top: 2px;
}

.feature-list i.fa-times {
  color: #dc3545; /* red */
  font-size: 17px;
  line-height: 1.2;
  margin-top: 2px;
}

/* Row 2 equaliser: make all three lists the same height so pricing aligns */
.features .row.equalize .feature-list { min-height: 260px !important; }

/* ----------------
   Additional info pills
   ---------------- */
.feature-additional {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
  min-height: 44px;
}

.add-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 12px;
  line-height: 1;
  background: #f4f9fc;
  color: #223a66;
  border: 1px solid #e6eef6;
  border-radius: 999px;
  padding: .5rem .75rem;
  white-space: nowrap;
}

.add-pill i { opacity: .8; }

/* ----------------
   Pricing block (darkened) 
   ---------------- */
.feature-price {
  text-align: center;
  margin-top: .25rem;
  margin-bottom: .25rem;
}

.feature-price .price-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #4b5563; /* darker grey */
  margin-bottom: .25rem;
}

.feature-price .price-amount {
  font-weight: 800;
  font-size: 34px;
  color: #1f2937; /* dark slate / near-black */
  line-height: 1;
}

.feature-price .price-amount small {
  font-weight: 600;
  font-size: 14px;
  margin-left: 6px;
  color: #374151; /* dark grey */
}

.feature-price .price-note {
  font-size: 12px;
  color: #6b7280; /* medium-dark grey */
  margin-top: .35rem;
}

/* ----------------
   Actions (buttons)
   ---------------- */
.feature-actions {
  margin-top: auto; /* pushes buttons to the bottom of the card */
  display: flex;
  gap: .5rem;
}

.feature-actions .btn {
  flex: 1 1 0;
  width: auto; /* rely on flex growth */
  white-space: nowrap;
}

/* Optional outline style for secondary button */
.feature-actions .btn.btn-outline {
  background: transparent;
  color: #11619D;
  border: 2px solid #11619D;
}

.feature-actions .btn.btn-outline:hover {
  background: #11619D;
  color: #fff;
}

/* ----------------
   GRID alignment (internal rows always in same order)
   ---------------- */
:root{
  --card-title-min: 56px;   /* 1–2 lines of <h4> */
  --card-list-min:  220px;  /* default list height (row 1) */
  --card-add-min:    48px;  /* pills area (even if empty) */
  --card-price-min:  96px;  /* label + amount + note */
}

.feature-item{
  display: grid;
  grid-template-rows:
    auto                                     /* 1) icon */
    minmax(var(--card-title-min), auto)      /* 2) title  */
    minmax(var(--card-list-min),  auto)      /* 3) list   */
    minmax(var(--card-add-min),   auto)      /* 4) pills  */
    minmax(var(--card-price-min), auto)      /* 5) price  */
    auto;                                    /* 6) actions */
  row-gap: .5rem;
}

.feature-item > .feature-icon        { grid-row: 1; }
.feature-item > h4                   { grid-row: 2; display:flex; align-items:center; justify-content:center; text-align:center; margin-bottom:0; }
.feature-item > .feature-list        { grid-row: 3; margin:0; }
.feature-item > .feature-additional  { grid-row: 4; }
.feature-item > .feature-price       { grid-row: 5; display:flex; flex-direction:column; justify-content:center; text-align:center; margin:0; }
.feature-item > .feature-actions     { grid-row: 6; align-self:end; display:flex; gap:.5rem; margin-top:0; }

/* If a card is missing .feature-additional, create an empty slot so rows still align */
.feature-item:not(:has(.feature-additional))::before{
  content:"";
  grid-row:4; /* reserve the pills row */
}

/* ----------------
   Responsive tweaks
   ---------------- */
@media (max-width: 575.98px) {
  .feature-list { min-height: 0; }  /* natural height on phones */
  .feature-actions { flex-direction: column; }

  /* Mobile: revert grid so content can stack naturally */
  .feature-item{
    display:flex;
    flex-direction:column;
  }
}

/* ----------------
   Optional button fallbacks (if your project doesn't define these)
   Safe to remove if you already have .btn, .btn-main, .btn-round-full
   ---------------- */
.btn.btn-main {
  background: #11619D;
  border: 2px solid #11619D;
  color: #fff;
  font-weight: 600;
  padding: .75rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn.btn-main:hover { 
  background: #0d4d7a; 
  color: #fff; 
  box-shadow: 0 4px 16px rgba(17,97,157,0.25);
}
.btn.btn-round-full { border-radius: 999px; }

/* Row 2: hard equalize list heights so price/buttons align perfectly */
.features .row.equalize .feature-list{
  height: 340px;          /* pick a single value for all three cards */
  min-height: 0 !important;
  max-height: 340px;      /* keep it fixed */
  overflow: auto;         /* show scroll if content exceeds height */
  margin-bottom: .75rem;  /* keep spacing consistent */
  padding-right: 4px;     /* tiny gutter so scrollbar doesn't overlap ticks */
}

/* Optional: nicer thin scrollbars (supported browsers) */
.features .row.equalize .feature-list{
  scrollbar-width: thin;
}
.features .row.equalize .feature-list::-webkit-scrollbar{
  width: 6px;
}
.features .row.equalize .feature-list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius: 6px;
}

.feature-price .price-label { color:#4b5563; }
.feature-price .price-amount { color:#1f2937; }
.feature-price .price-amount small { color:#374151; }
.feature-price .price-note { color:#6b7280; }

/* Mobile: add space between stacked cards */
@media (max-width: 575.98px) {
  /* If you're on Bootstrap 5, this sets vertical gutter for rows */
  .features .row { --bs-gutter-y: 1.25rem; }

  /* Fallback for any Bootstrap version: add margin between columns */
  .features .row > [class^="col-"],
  .features .row > [class*=" col-"] {
    margin-bottom: 1.25rem;  /* ~20px */
  }
  .features .row > [class^="col-"]:last-child,
  .features .row > [class*=" col-"]:last-child {
    margin-bottom: 0;
  }

  /* Optional: slightly reduce card padding so it feels lighter on phones */
  /* .feature-item { padding: 28px 22px; } */
}