/* =========================================================
   Pricing page – page-scoped styles only
   File: assets/themes/crossmerg/custom/css/pricing.css
   Loaded automatically by head.php when slug = pricing
   ========================================================= */

/* =========================================================
   HERO + SECTION SPACING (pricing-specific)
   ========================================================= */

/* =========================================================
   PRICING — HERO ALIGNMENT (center eyebrow + title precisely)
   Owner: pricing.css
   ========================================================= */

/* =========================================================
   PRICING — HERO (Markup uses .cm-section-hero, not .cm-hero)
   ========================================================= */

.cm-page--pricing .cm-section.cm-section-hero {
  text-align: center;
}

/* Pricing hero content is inside a Bootstrap column wrapper */
.cm-page--pricing .cm-section.cm-section-hero .cm-heading-center {
  text-align: center;
}

.cm-page--pricing .cm-section.cm-section-hero .cm-eyebrow,
.cm-page--pricing .cm-section.cm-section-hero .cm-hero-title,
.cm-page--pricing .cm-section.cm-section-hero .cm-hero-subtitle {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}



.cm-page--pricing .cm-section.cm-section-hero {
  padding-top: 56px;
  padding-bottom: 32px;
}


.cm-section.cm-section-pricing {
  padding-top: 32px;
  padding-bottom: 44px;
  border-top: none !important;
}

.cm-section.cm-section-compare {
  padding-top: 52px;
  padding-bottom: 56px;
  border-top: 1px solid var(--cm-border-subtle, rgba(15,23,42,0.06));
}

.cm-section.cm-section-cta {
  padding-top: 56px;
  padding-bottom: 56px;
}

.cm-section.cm-section-faq {
  padding-top: 52px;
  padding-bottom: 64px;
}



/* =========================================================
   LAYOUT HELPERS (used by pricing markup)
   ========================================================= */

.cm-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.cm-section-heading{
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--cm-ink, #0f172a);
  margin-bottom: .75rem;
  letter-spacing: -0.01em;
}

.cm-section-subtext{
  font-size: 1rem;
  color: #475569;
  max-width: 38rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
}

/* bootstrap helper class compatibility */
.cm-section-subtext.mx-auto{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   BILLING TOGGLE CONTAINER
   ========================================================= */

.cm-billing-box {
  background: var(--cm-surface-soft-alt, #f3f4f6);
  border-radius: 1.25rem;
  padding: 2rem 1.7rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

.cm-billing-toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* =========================================================
   POLISHED BILLING TOGGLE
   ========================================================= */

.cm-billing-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 360px;
  height: 56px;
  padding: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
  transition:
    box-shadow 0.2s ease,
    background-color 0.25s ease,
    transform 0.18s ease;
}

.cm-billing-toggle:hover {
  box-shadow: 0 16px 40px rgba(15,23,42,0.18);
  transform: translateY(-1px);
}

/* Sliding pill */
.cm-billing-slider {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(50% - 6px);
  height: calc(100% - 12px);
  border-radius: 999px;
  background: #020617;
  box-shadow: 0 6px 18px rgba(15,23,42,0.55);
  z-index: 1;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Yearly active */
.cm-billing-toggle.is-yearly .cm-billing-slider {
  background: var(--cm-gradient-cta, linear-gradient(135deg, #2563eb, #4f46e5));
  box-shadow: 0 10px 28px rgba(37,99,235,0.55);
}

/* Toggle buttons */
.cm-billing-toggle button {
  position: relative;
  z-index: 2;
  flex: 1 1 50%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  border-radius: 999px;
  color: #4b5563;
  font-size: 1rem;
  font-weight: 600;
  transition:
    color 0.2s ease,
    transform 0.18s ease;
}

.cm-billing-toggle button:active {
  transform: scale(0.97);
}

.cm-billing-toggle button:hover {
  color: #111827;
}

.cm-toggle-icon {
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.7;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.cm-toggle-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  min-height: 1.2em;
  transition: opacity 0.25s ease;
}

.cm-billing-toggle button.is-active {
  color: #f1f5f9;
  transform: translateY(-1px);
}

.cm-billing-toggle button.is-active::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
  pointer-events: none;
}

.cm-billing-toggle button.is-active .cm-toggle-icon {
  opacity: 1;
  transform: translateY(-1px);
}

.cm-billing-toggle button:not(.is-active) .cm-toggle-label {
  opacity: 0.85;
}

/* Yearly save label */
.cm-billing-toggle button[data-billing="yearly"] .cm-billing-save-label {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
}

.cm-billing-toggle button[data-billing="yearly"].is-active .cm-billing-save-label {
  display: block;
  margin-top: 1px;
  color: #4ade80;
  font-size: 0.66rem;
  line-height: 1.05;
}

@media (max-width: 480px) {
  .cm-billing-toggle {
    width: 100%;
    max-width: 340px;
    height: 52px;
  }
}

.cm-billing-helper {
  font-size: .9rem;
  color: #4b5563;
  margin: .4rem 0 0;
  max-width: 36rem;
}

/* =========================================================
   BADGES
   ========================================================= */

.cm-price-badge {
  display: none;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  background: #022c22;
  color: #a7f3d0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cm-price-badge.is-visible { display: inline-flex; }

/* =========================================================
   PRICING CARDS
   ========================================================= */

.cm-pricing-grid-row > [class*="col-"] { margin-bottom: 20px; }

.cm-pricing-card {
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,0.10);
  padding: 2rem 1.8rem 1.8rem;
  background: var(--cm-surface-soft, #f9fafb);
  box-shadow: var(--cm-shadow-soft, 0 10px 26px rgba(15,23,42,0.03));
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.cm-pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cm-shadow-hover, 0 20px 46px rgba(15,23,42,0.14));
  border-color: rgba(37,99,235,0.40);
  background: var(--cm-surface, #ffffff);
}

.cm-pricing-card.is-featured {
  border-color: rgba(37,99,235,0.75);
  box-shadow: 0 24px 60px rgba(37,99,235,0.35);
  background: #eff6ff;
  transform: translateY(-4px);
}

.cm-plan-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.cm-plan-recommended {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: .13em;
  display: none;
}
.cm-plan-recommended.is-visible { display: inline-block; }

.cm-plan-name {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--cm-ink, #0f172a);
}

/* Prevent the left "Recommended" pill from overlapping the plan name */
.cm-pricing-card.is-recommended .cm-plan-name {
  margin-top: .6rem;
}

.cm-plan-desc {
  font-size: .86rem;
  color: var(--cm-muted, #6b7280);
  margin-bottom: 1rem;
}

.cm-price-row {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-bottom: 0.9rem !important;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.cm-price-row strong.cm-price-value {
  font-size: 2rem;
  line-height: 1;
}

.cm-price-row span.cm-price-per {
  font-size: .9rem;
  color: var(--cm-muted, #6b7280);
}

.cm-plan-savings {
  font-size: .8rem;
  color: #166534;
  background: #dcfce7;
  border-radius: .75rem;
  padding: .25rem .6rem;
  display: none;
  margin-bottom: .9rem;
}
.cm-plan-savings.is-visible { display: inline-block; }

/* Make plan buttons full-width but do NOT redefine button skins here */
.cm-pricing-card .cm-btn-primary {
  width: 100%;
  justify-content: center;
  box-shadow: none;
}

/* =========================================================
   COMPARISON TABLE
   ========================================================= */

.cm-compare-wrap {
  margin-top: 12px;
  overflow-x: auto;
}

.cm-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .85rem;
}

.cm-compare-table th,
.cm-compare-table td {
  padding: .75rem .9rem;
  border-bottom: 1px solid rgba(148,163,184,0.4);
  text-align: left;
}

.cm-compare-table thead th {
  font-size: .86rem;
  font-weight: 600;
  color: var(--cm-ink, #0f172a);
  background: var(--cm-surface-soft, #f9fafb);
}

.cm-compare-row-label {
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
}

.cm-compare-check {
  font-size: 1rem;
  color: #16a34a;
}

.cm-compare-subtext {
  color: var(--cm-muted, #6b7280);
  font-size: .8rem;
}

/* =========================================================
   COMPARISON TABLE — GROUP HEADER “BANDS”
   (Group rows are the ones with: <td class="cm-compare-row-label" colspan="4">...)
   Owner: pricing.css (page-scoped)
   ========================================================= */

/* Make group header rows look like section bands */
.cm-page--pricing .cm-compare-table tbody td.cm-compare-row-label[colspan="4"]{
  background: rgba(37, 99, 235, 0.06);
  color: var(--cm-ink, #0f172a);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 800;
  padding: .7rem .9rem;
  border-top: 1px solid rgba(148, 163, 184, 0.55);
  border-bottom: 1px solid rgba(148, 163, 184, 0.55);
  position: relative;
}

/* Left accent bar */
.cm-page--pricing .cm-compare-table tbody td.cm-compare-row-label[colspan="4"]::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(37, 99, 235, 0.55);
}

/* Slightly tighten the first data row after each band */
.cm-page--pricing .cm-compare-table tbody td.cm-compare-row-label[colspan="4"] + td{
  padding-top: .85rem;
}

/* Keep check icon nicely centered */
.cm-page--pricing .cm-compare-table .cm-compare-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
}

/* =========================================================
   PRICING — Calm chapter styling (Stripe-ish)
   Compare section gets a soft stage + table becomes a card
   ========================================================= */



/* Make the compare table sit on a calm “card” */
.cm-page--pricing .cm-compare-wrap {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
  overflow: hidden; /* keeps rounded corners clean */
}

/* Slightly roomier table rows for readability */
.cm-page--pricing .cm-compare-table th,
.cm-page--pricing .cm-compare-table td {
  padding: .85rem 1rem;
}

/* Calm zebra striping (very subtle) */
.cm-page--pricing .cm-compare-table tbody tr:nth-child(even) td {
  background: rgba(15,23,42,0.02);
}

/* Keep your group header bands, but make them calmer inside the card */
.cm-page--pricing .cm-compare-table tbody td.cm-compare-row-label[colspan="4"]{
  background: rgba(37, 99, 235, 0.08);
  border-top: 1px solid rgba(15,23,42,0.06);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.cm-page--pricing .cm-compare-table tbody td.cm-compare-row-label[colspan="4"]::before{
  background: rgba(37, 99, 235, 0.45);
}

/* Calm compaction for large comparison table */
.cm-page--pricing .cm-compare-table th,
.cm-page--pricing .cm-compare-table td {
  padding: .7rem .9rem;
  line-height: 1.35;
}

/* Strengthen the Compare section heading */
.cm-page--pricing .cm-section-compare .cm-section-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

/* This gives the section a visual anchor without being decorative */
.cm-page--pricing .cm-section-compare .cm-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: .6rem;
  background: rgba(37,99,235,0.5);
  border-radius: 999px;
}



/* Compare card wrapper */
.cm-section-compare .cm-compare-wrap {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
  overflow: hidden;
}

/* Table padding + calm zebra */
.cm-section-compare .cm-compare-table th,
.cm-section-compare .cm-compare-table td {
  padding: .85rem 1rem;
}

.cm-section-compare .cm-compare-table tbody tr:nth-child(even) td {
  background: rgba(15,23,42,0.02);
}

/* Group header rows inside the compare table */
.cm-section-compare .cm-compare-table tbody td.cm-compare-row-label[colspan="4"] {
  background: rgba(37, 99, 235, 0.08);
  border-top: 1px solid rgba(15,23,42,0.06);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

/* =========================================================
   PRICING — CTA GROUP (desktop inline, mobile stacked)
   Owner: pricing.css
   ========================================================= */

.cm-page--pricing .cm-pricing-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* Give the buttons consistent min sizing without forcing full width on desktop */
.cm-page--pricing .cm-pricing-cta .cm-btn-primary,
.cm-page--pricing .cm-pricing-cta .cm-btn-secondary,
.cm-page--pricing .cm-pricing-cta .btn {
  min-width: 190px;
}

/* Mobile: stack, full width, easy tap targets */
@media (max-width: 480px) {
  .cm-page--pricing .cm-pricing-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .cm-page--pricing .cm-pricing-cta .cm-btn-primary,
  .cm-page--pricing .cm-pricing-cta .cm-btn-secondary,
  .cm-page--pricing .cm-pricing-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   PRICING — CTA STRIP LAYOUT (desktop balanced, mobile stacked)
   ========================================================= */

/* Mobile-first: stack content + make buttons full-width */
.cm-page--pricing .cm-section-cta .cm-cta-strip {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cm-page--pricing .cm-section-cta .cm-cta-strip-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

/* Full-width tap targets on mobile */
.cm-page--pricing .cm-section-cta .cm-cta-strip-actions .cm-btn-primary,
.cm-page--pricing .cm-section-cta .cm-cta-strip-actions .cm-btn-secondary {
  width: 100%;
  justify-content: center;
}

/* Desktop: text left, actions right, buttons in a tidy row that can wrap */
@media (min-width: 768px) {
  .cm-page--pricing .cm-section-cta .cm-cta-strip {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .cm-page--pricing .cm-section-cta .cm-cta-strip-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .cm-page--pricing .cm-section-cta .cm-cta-strip-actions .cm-btn-primary,
  .cm-page--pricing .cm-section-cta .cm-cta-strip-actions .cm-btn-secondary {
    width: auto;
  }
}

/* =========================================================
   PRICING — CTA button hierarchy (softer secondary)
   ========================================================= */

.cm-page--pricing .cm-section-cta .cm-cta-strip-actions .cm-btn-secondary {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(15, 23, 42, 0.12);
  color: rgba(15, 23, 42, 0.86);
  box-shadow: none;
}

.cm-page--pricing .cm-section-cta .cm-cta-strip-actions .cm-btn-secondary:hover {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
  transform: translateY(-1px);
}


/* =========================================================
   FAQ
   ========================================================= */
/* Softer transition into FAQ (breathing room before questions)*/
.cm-page--pricing .cm-section.cm-section-faq {
  margin-top: 1.5rem;
}

.cm-faq-q {
  font-size: .9rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: .15rem;
}

.cm-faq-a {
  font-size: .86rem;
  color: var(--cm-muted, #6b7280);
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .cm-pricing-grid-row > [class*="col-"] + [class*="col-"] {
    margin-top: 16px;
  }
}

/* =========================================================
   PRICING — FAQ ICON COLOR GROUPS
   Subtle visual grouping for scanability
   Owner: pricing.css (page-scoped)
   ========================================================= */

/* Base FAQ icon badge (safety reset) */
.cm-page--pricing .cm-section-faq .cm-faq-icon {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1rem;
}

/* Group 1: Billing & pricing (FAQ cards 1–3) */
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(1) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(2) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(3) .cm-faq-icon {
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}

/* Group 2: Plans & users (FAQ cards 4–6) */
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(4) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(5) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(6) .cm-faq-icon {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

/* Group 3: Invoices & portal usage (FAQ cards 7–9) */
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(7) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(8) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(9) .cm-faq-icon {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
}

/* Group 4: Support, onboarding & extras (FAQ cards 10–12) */
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(10) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(11) .cm-faq-icon,
.cm-page--pricing .cm-section-faq .cm-card-row > div:nth-of-type(12) .cm-faq-icon {
  background: rgba(124, 58, 237, 0.14);
  color: #5b21b6;
}

/* =========================================================
   PRICING — FAQ calming (reduce competition with Compare)
   ========================================================= */

/* Give FAQ section a soft background to separate it from CTA + compare */
.cm-page--pricing .cm-section.cm-section-faq {
  background: #ffffff;
}

/* If your FAQ cards use .cm-faq-card (details) or a card wrapper, soften it */
.cm-page--pricing .cm-section-faq .cm-faq-card,
.cm-page--pricing .cm-section-faq .cm-card {
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 8px 22px rgba(15,23,42,0.04);
}

/* Calm hover (less “pop”) */
.cm-page--pricing .cm-section-faq .cm-faq-card:hover,
.cm-page--pricing .cm-section-faq .cm-card:hover {
  box-shadow: 0 12px 28px rgba(15,23,42,0.06);
}

/* Give the FAQ grid a bit more breathing room */
.cm-page--pricing .cm-section-faq .cm-card-row {
  margin-top: 1.25rem;
}

/* headings to feel a touch more “premium” */

.cm-page--pricing .cm-section-title {
  letter-spacing: -0.01em;
}

/* =========================================================
   PRICING FAQ — prevent the big "+" from overlaying the sticky header
   ========================================================= */

/* Create a local stacking context for the FAQ area */
.cm-page--pricing .cm-section-faq {
  position: relative;
  z-index: 0;
}

/* Ensure each FAQ card is its own stacking context and can't float above the header */
.cm-page--pricing .cm-section-faq details.cm-faq-card {
  position: relative;
  z-index: 0;
  isolation: isolate; /* modern, very effective for pseudo-elements */
}

/* Force the "+" pseudo-element behind card content (and definitely below the header) */
.cm-page--pricing .cm-section-faq details.cm-faq-card summary::after {
  z-index: 0 !important;
}

/* Keep the summary/content above the pseudo-element inside the card */
.cm-page--pricing .cm-section-faq details.cm-faq-card summary,
.cm-page--pricing .cm-section-faq details.cm-faq-card .cm-faq-answer,
.cm-page--pricing .cm-section-faq details.cm-faq-card .cm-faq-body {
  position: relative;
  z-index: 1;
}