/* ============================================================
   House 35 Global Infotech LLP — pages/plans.css
   Plans overview + individual plan pages
   ============================================================ */

/* Plans category grid */
.plans-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.plans-category-card {
  background: var(--white); border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.08); padding: 32px 28px;
  text-decoration: none; color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex; flex-direction: column; gap: 12px;
}
.plans-category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(4,44,83,0.1);
  border-color: var(--green);
}
.plans-category-icon {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.plans-category-card h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--navy); letter-spacing: -0.02em;
}
.plans-category-card p { font-size: 14px; color: var(--gray-600); line-height: 1.65; }
.plans-category-from {
  font-size: 13px; color: var(--green); font-weight: 500;
  margin-top: auto; padding-top: 8px;
}

/* Comparison table */
.plans-compare {
  width: 100%; border-collapse: collapse; margin-top: 40px;
}
.plans-compare th {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--navy); padding: 16px 20px; text-align: left;
  border-bottom: 2px solid var(--gray-100);
}
.plans-compare th.featured-col { color: var(--green); }
.plans-compare td {
  padding: 14px 20px; font-size: 14px; color: var(--gray-600);
  border-bottom: 1px solid var(--gray-100);
}
.plans-compare tr:hover td { background: rgba(29,158,117,0.04); }
.plans-compare .check-yes { color: var(--green); font-weight: 500; }
.plans-compare .check-no  { color: var(--gray-400); }

/* Currency toggle */
.currency-toggle {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--gray-600); margin-bottom: 32px;
}
.currency-toggle button {
  padding: 6px 16px; border-radius: 20px; border: 1px solid;
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: var(--font-body); transition: all 0.15s;
}
.currency-toggle button.active {
  background: var(--navy); color: var(--white); border-color: var(--navy);
}
.currency-toggle button:not(.active) {
  background: var(--white); color: var(--gray-600);
  border-color: rgba(0,0,0,0.15);
}
.currency-toggle button:not(.active):hover {
  border-color: var(--navy); color: var(--navy);
}

@media (max-width: 600px) {
  .plans-compare { font-size: 13px; }
  .plans-compare th, .plans-compare td { padding: 12px; }
}