/* Host4India component library — net-new styles only.
   Existing theme classes (.card-plan, .rts-service__single, .rts-cta,
   .accordion, .rts-testimonial__single) supply the base look on both stacks;
   this file adds only what the new components need. Bootstrap 5.3 utilities
   handle layout. */

:root {
  --h4i-accent: #2f5bff;
  --h4i-accent-dark: #1f3fb0;
  --h4i-ink: #0f1b33;
  --h4i-muted: #5b6b86;
  --h4i-line: #e6ebf5;
  --h4i-soft: #f4f7fe;
}

/* ---- PricingCard: "Most Popular" highlight + badge ---- */
.h4i-card-plan { position: relative; }
.h4i-card-plan--popular {
  border: 2px solid var(--h4i-accent) !important;
  box-shadow: 0 18px 40px rgba(47, 91, 255, .14);
}
.h4i-card-plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--h4i-accent); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}

/* ---- ProductTile additions ---- */
.h4i-tile { height: 100%; }
.h4i-tile__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.h4i-tile__from { margin-top: auto; font-size: 15px; color: var(--h4i-muted); }
.h4i-tile__price { font-weight: 700; color: var(--h4i-ink); }
.h4i-tile__price sup { font-size: .7em; margin-right: 1px; }
.h4i-tile__cta { margin-top: 12px; font-weight: 600; color: var(--h4i-accent); }
.h4i-tile__link:hover .h4i-tile__cta { color: var(--h4i-accent-dark); }
.h4i-tile__link:hover .h4i-tile__cta i { transform: translateX(3px); }
.h4i-tile__cta i { transition: transform .2s ease; }

/* ---- TrustStrip ---- */
.h4i-trust {
  display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between;
  align-items: stretch; background: var(--h4i-soft); border: 1px solid var(--h4i-line);
  border-radius: 18px; padding: 24px 28px;
}
.h4i-trust__item { display: flex; align-items: center; gap: 12px; flex: 1 1 180px; min-width: 180px; }
.h4i-trust__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px;
  background: #fff; color: var(--h4i-accent); font-size: 20px; border: 1px solid var(--h4i-line);
}
.h4i-trust__body { display: flex; flex-direction: column; line-height: 1.3; }
.h4i-trust__title { color: var(--h4i-ink); font-size: 15px; }
.h4i-trust__text { color: var(--h4i-muted); font-size: 13px; }

/* ---- TechSpecsGrid ---- */
.h4i-techspecs__cell {
  height: 100%; background: #fff; border: 1px solid var(--h4i-line); border-radius: 14px;
  padding: 22px 18px; text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.h4i-techspecs__icon { color: var(--h4i-accent); font-size: 24px; margin-bottom: 6px; }
.h4i-techspecs__value { font-size: 19px; font-weight: 700; color: var(--h4i-ink); }
.h4i-techspecs__label { font-size: 14px; color: var(--h4i-muted); }

/* ---- FeatureComparisonTable ---- */
.h4i-compare__caption { caption-side: top; font-weight: 600; color: var(--h4i-ink); padding-bottom: 10px; }
.h4i-compare th[scope="row"] { font-weight: 600; color: var(--h4i-ink); }
.h4i-compare__yes { color: #1ca672; }
.h4i-compare__no { color: #c2c9d6; }
.h4i-compare__hl { background: var(--h4i-soft); }
.h4i-compare thead th { background: var(--h4i-ink); color: #fff; border-color: var(--h4i-ink); }

/* ---- Billing toggle (monthly/annual) ---- */
.h4i-billing-toggle { display: inline-flex; background: var(--h4i-soft); border: 1px solid var(--h4i-line); border-radius: 999px; padding: 4px; gap: 4px; }
.h4i-billing-toggle [data-h4i-billing] {
  border: 0; background: transparent; padding: 8px 18px; border-radius: 999px;
  font-weight: 600; color: var(--h4i-muted); cursor: pointer;
}
.h4i-billing-toggle [data-h4i-billing].active { background: var(--h4i-accent); color: #fff; }

/* ---- Testimonial placeholder ("coming soon") ---- */
.h4i-testimonial-soon {
  height: 100%; border: 1px dashed var(--h4i-line); border-radius: 16px;
  padding: 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center;
  align-items: center; text-align: center; color: var(--h4i-muted); background: #fff;
}
.h4i-testimonial-soon i { font-size: 26px; color: var(--h4i-accent); }