/* ========================================
   Plan pricing compare — 3-card Toro block
   Rules: docs/COLOR-PALETTE.md (§ Page modifiers)
   Modifiers: .hiw-pricing (dark section) | .toro-pricing (light section)
   ======================================== */

/* --- Card shell (shared) --- */
.hiw-pricing .price-card,
.toro-pricing .price-card,
.hiw-pricing .price-card:hover,
.toro-pricing .price-card:hover {
  padding: var(--spacing-36) var(--spacing-24);
  border: 1px solid transparent;
  background-color: var(--color-text-white) !important;
  cursor: default !important;
}

.hiw-pricing .price-card .icon,
.toro-pricing .price-card .icon {
  background-color: var(--color-brand-alpha-10) !important;
  padding: var(--spacing-20);
}

.hiw-pricing .price-card:hover .icon,
.toro-pricing .price-card:hover .icon {
  background-color: var(--color-brand-alpha-10) !important;
}

/* --- CTA (shared) --- */
.hiw-pricing .price-card .btn,
.hiw-pricing .price-card .pricing-cta,
.toro-pricing .price-card .btn,
.toro-pricing .price-card .pricing-cta {
  border-color: var(--title-color) !important;
  background-color: transparent !important;
  cursor: pointer;
}

.hiw-pricing .price-card:hover .btn,
.hiw-pricing .price-card:hover .pricing-cta,
.hiw-pricing .price-card:hover a.btn.pricing-cta,
.toro-pricing .price-card:hover .btn,
.toro-pricing .price-card:hover .pricing-cta,
.toro-pricing .price-card:hover a.btn.pricing-cta {
  border-color: var(--color-brand-600) !important;
  background-color: var(--color-brand-600) !important;
}

.hiw-pricing .price-card:hover .btn span,
.hiw-pricing .price-card:hover .pricing-cta span,
.toro-pricing .price-card:hover .btn span,
.toro-pricing .price-card:hover .pricing-cta span {
  color: var(--color-text-white) !important;
}

.hiw-pricing .price-card:hover .btn svg path,
.hiw-pricing .price-card:hover .pricing-cta svg path,
.toro-pricing .price-card:hover .btn svg path,
.toro-pricing .price-card:hover .pricing-cta svg path {
  stroke: var(--color-text-white) !important;
}

.hiw-pricing .pricing-cta,
.hiw-pricing .pricing-cta.btn-outline-black,
.toro-pricing .pricing-cta,
.toro-pricing .pricing-cta.btn-outline-black {
  border-color: var(--title-color);
  color: var(--title-color);
}

.hiw-pricing .pricing-cta.btn-outline-black:hover,
.hiw-pricing .pricing-cta.btn-outline-black:focus,
.hiw-pricing .pricing-cta.btn-outline-black:active,
.toro-pricing .pricing-cta.btn-outline-black:hover,
.toro-pricing .pricing-cta.btn-outline-black:focus,
.toro-pricing .pricing-cta.btn-outline-black:active {
  border-color: var(--color-brand-600) !important;
  color: var(--color-text-white) !important;
  background-color: var(--color-brand-600) !important;
}

/* --- Billing toggle (shared chrome) --- */
.hiw-pricing .pricing-toggle.billing-wrapper,
.toro-pricing .pricing-toggle.billing-wrapper {
  padding: var(--spacing-12);
  border: 2px solid var(--color-brand-600);
  border-radius: var(--br-48);
  background-color: transparent;
}

.hiw-pricing .pricing-toggle .bill-label,
.toro-pricing .pricing-toggle .bill-label {
  border: none;
  background-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.hiw-pricing .pricing-toggle .bill-label:hover,
.toro-pricing .pricing-toggle .bill-label:hover {
  color: var(--color-brand-600);
}

.hiw-pricing .pricing-toggle .bill-label.active,
.toro-pricing .pricing-toggle .bill-label.active,
.pricing-details.hiw-pricing.dark .bill-label.active {
  color: var(--color-text-white) !important;
  background-color: var(--color-brand-600) !important;
}

.hiw-pricing .pricing-toggle .bill-label.active span,
.toro-pricing .pricing-toggle .bill-label.active span {
  color: var(--color-text-white) !important;
}

/* --- Featured middle card (shared) --- */
.hiw-pricing .pricing-cards .row > .col-lg-4:nth-child(2) .price-card,
.toro-pricing .pricing-cards .row > .col-lg-4:nth-child(2) .price-card {
  border: none !important;
}

.hiw-pricing .pricing-cards .row > .col-lg-4:nth-child(2) .price-card .newsPill.bg-orange,
.hiw-pricing .pricing-cards .row > .col-lg-4:nth-child(2) .price-card .newsPill.bg-orange.bg-green,
.toro-pricing .pricing-cards .row > .col-lg-4:nth-child(2) .price-card .newsPill.bg-orange,
.toro-pricing .pricing-cards .row > .col-lg-4:nth-child(2) .price-card .newsPill.bg-orange.bg-green {
  background-color: var(--color-brand-600) !important;
  color: var(--color-text-white) !important;
}

/* --- Dark section (.hiw-pricing) --- */
.hiw-pricing .pricing-toggle .bill-label {
  color: var(--color-text-white);
}

/* --- Light section (.toro-pricing) --- */
.toro-pricing .text-light {
  color: var(--lighttext-color) !important;
}

.toro-pricing .pricing-toggle .bill-label {
  color: var(--title-color);
}

/* --- Compare table thead CTA (primary button + standard hover) --- */
.compare-section .comparePlans .pricing-cta.btn-primary {
  cursor: pointer;
  background-color: var(--color-brand-600);
  border-color: var(--color-brand-600);
  color: var(--color-btn-text-on-green);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.compare-section .comparePlans .pricing-cta.btn-primary span {
  color: var(--color-btn-text-on-green) !important;
}

.compare-section .comparePlans .pricing-cta.btn-primary:hover,
.compare-section .comparePlans .pricing-cta.btn-primary:focus {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--color-btn-text-on-green);
}

.compare-section .comparePlans .pricing-cta.btn-primary:hover span,
.compare-section .comparePlans .pricing-cta.btn-primary:focus span {
  color: var(--color-btn-text-on-green) !important;
}