/* ---------- Column override ---------- */
/* The module renders its own card-wide grid, so the wrapping DnD column
   doesn't need its default 24px inner padding. */
.dnd-section .dnd-column.product-card-column {
  padding: 0;
}

/* ---------- Cards grid ----------
   Defines 6 implicit rows so each card's sections (header, subtitle, description,
   fees, list, button) can opt into subgrid and align horizontally across cards.
   Row-gap is inherited by subgrid into each card; column-gap separates the cards. */
.product-cards {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  column-gap: var(--dnd-section-row-gap, 24px);
  row-gap: var(--dnd-column-gap, 8px);
  width: 100%;
  align-items: stretch;
}

.product-cards--cols-1 { grid-template-columns: minmax(0, 1fr); }
.product-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tablet — collapse 3-column grids to 2 */
@media (max-width: 1023px) {
  .product-cards--cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile — single column, drop subgrid alignment (cards stack so it's not needed) */
@media (max-width: 767px) {
  .product-cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 0;
    row-gap: var(--gap-large, 16px);
  }
}

/* ---------- Product card shell ----------
   Default: flex column. This is the safe baseline so HubSpot's screenshot
   renderer (older Chromium without subgrid) and any browsers lacking subgrid
   still render correctly when saving sections. */
.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--dnd-column-gap, 8px);
  padding: var(--dnd-column-padding-y, 24px) var(--dnd-column-padding-x, 24px);
  background-color: var(--koalect-mono-50, #FAFAFA);
  border-radius: var(--radius-container, 16px);
  font-family: var(--font-primary, Mulish, sans-serif);
  color: var(--koalect-mono-800, #262626);
}

/* Subgrid progressive enhancement — only modern browsers that support subgrid
   get the cross-card row alignment (description/fees/CTA stay on the same Y). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .product-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
    }
  }
}

/* ---------- Header (title + top-right icon) ---------- */
.product-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-medium, 10px);
  margin-bottom: 20px;
}

.product-card__title {
  margin: 0;
  font-family: var(--font-primary, Mulish, sans-serif);
  font-size: var(--heading-md, 30px);
  font-weight: 800;
  line-height: 36px;
  color: inherit;
}

.product-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 32px;
  line-height: 32px;
  color: var(--card-header-icon-color, var(--koalect-primary-400, #9FD7CD));
}

.product-cards--brand-raisenow .product-card__icon {
  color: var(--card-header-icon-color, var(--raisenow-primary-500, #F46665));
}

.product-card__icon i,
.product-card__icon i::before {
  display: block;
  font-size: 32px;
  line-height: 32px;
}

/* ---------- Subtitle + description ---------- */
.product-card__subtitle {
  margin: 0 0 var(--gap-large, 16px);
  font-family: var(--font-primary, Mulish, sans-serif);
  font-size: var(--heading-sm, 20px);
  font-weight: 800;
  line-height: 24px;
  color: inherit;
}

.product-card__description,
.product-card__description p,
.product-card__description li {
  font-family: var(--font-primary, Mulish, sans-serif);
  font-size: var(--paragraph-md, 16px);
  font-weight: 400;
  line-height: 20px;
  color: inherit;
}

.product-card__description {
  margin: 0 0 var(--container-padding-lg, 40px);
}

.product-card__description p {
  margin: 0 0 var(--dnd-row-gap, 8px);
}

.product-card__description > :first-child { margin-top: 0; }
.product-card__description > :last-child  { margin-bottom: 0; }
.product-card__description p:last-child   { margin-bottom: 0; }

/* ---------- Fees (one merged section) ----------
   Outer mint card with two sections inside: top = License fee text on the
   container's mint, bottom = Service fee panel as a lighter inner card.
   Spacing follows the Figma spec: 16px outer padding, 8px gap between rows. */
.product-card__fees {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dnd-column-gap, 8px);
  background-color: var(--koalect-primary-300, #BEDFD9);
  border-radius: var(--radius-container, 16px);
  padding: var(--tag-padding-x-large, 10px);
  margin-bottom: var(--container-padding-lg, 40px);
}

.product-card--brand-raisenow .product-card__fees {
  background-color: var(--raisenow-primary-300, #F89B9B);
}

.fee-panel {
  display: flex;
  align-items: center;
  gap: var(--dnd-row-gap, 8px);
}

/* Primary fee — License fee row. Transparent so it sits directly on the
   outer mint, padded with the tag spacing tokens for compact alignment. */
.fee-panel--primary {
  background-color: transparent;
  color: var(--koalect-mono-50, #FAFAFA);
  justify-content: flex-start;
  padding: var(--tag-padding-y-large, 8px) var(--tag-padding-x-large, 10px);
  border-radius: 0;
}

/* Secondary fee — inner Service fee card, lighter wash with its own radius
   and a nested boxed numeric on the right. Asymmetric padding (per Figma):
   10px top/left/bottom, 6px right so the inner pill sits flush near the edge. */
.fee-panel--secondary {
  background-color: var(--koalect-primary-200, #D5E8E0);
  color: var(--koalect-secondary-500, #552680);
  justify-content: space-between;
  padding: var(--tag-padding-x-large, 10px) var(--gap-small, 6px) var(--tag-padding-x-large, 10px) var(--tag-padding-x-large, 10px);
  border-radius: var(--radius-container, 16px);
  margin-top: 0;
}

.product-card--brand-raisenow .fee-panel--secondary {
  background-color: var(--raisenow-primary-200, #FBC1C0);
  color: var(--raisenow-primary-700, #B23B3A);
}

/* Numeric block (left side on primary, right side on secondary) */
.fee-panel__numeric-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  flex: 0 0 auto;
}

.fee-panel--primary .fee-panel__numeric-block {
  flex-direction: row;
  align-items: baseline;
  gap: var(--gap-small, 6px);
}

.fee-panel__prefix {
  font-family: var(--font-primary, Mulish, sans-serif);
  font-size: var(--paragraph-sm, 14px);
  font-style: italic;
  font-weight: 700;
  line-height: 18px;
  color: inherit;
}

.fee-panel--secondary .fee-panel__prefix {
  font-size: var(--paragraph-lg, 18px);
  font-weight: 300;
  line-height: 22px;
}

.fee-panel__numeric {
  font-family: var(--font-primary, Mulish, sans-serif);
  font-weight: 900;
  color: inherit;
}

.fee-panel--primary .fee-panel__numeric {
  font-size: 40px;
  line-height: 40px;
}

.fee-panel--secondary .fee-panel__numeric {
  font-size: var(--heading-sm, 20px);
  line-height: 24px;
  font-weight: 700;
}

.fee-panel--secondary .fee-panel__numeric em {
  font-size: var(--paragraph-lg, 18px);
  line-height: 22px;
  font-weight: 300;
  font-style: italic;
}

.fee-panel--secondary .fee-panel__numeric strong {
  font-size: var(--heading-sm, 20px);
  line-height: 24px;
  font-weight: 700;
  font-style: normal;
}

.fee-panel__numeric > :first-child { margin-top: 0; }
.fee-panel__numeric > :last-child  { margin-bottom: 0; }

.fee-panel__numeric p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Boxed numeric inside the secondary panel — same mint as the primary panel
   for visual rhythm, sitting on the lighter secondary wash. */
.fee-panel__numeric-block--boxed {
  align-items: flex-start;
  padding: var(--container-padding-md, 24px);
  border-radius: var(--radius-container, 16px);
  background-color: var(--koalect-primary-300, #BEDFD9);
  color: var(--koalect-mono-50, #FAFAFA);
  max-width: 240px;
}

.product-card--brand-raisenow .fee-panel__numeric-block--boxed {
  background-color: var(--raisenow-primary-500, #F46665);
  color: var(--raisenow-mono-50, #FFFFFF);
}

/* Meta column (label + sublabel) */
.fee-panel__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fee-panel--primary .fee-panel__meta {
  flex: 1 1 auto;
}

.fee-panel--secondary .fee-panel__meta {
  flex: 0 1 auto;
}

.fee-panel__label-row {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-small, 6px);
}

.fee-panel__inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  font-size: 13px;
  line-height: 13px;
  color: inherit;
}

.fee-panel__inline-icon i,
.fee-panel__inline-icon i::before {
  display: block;
  font-size: 13px;
  line-height: 13px;
}

.fee-panel__label {
  font-family: var(--font-primary, Mulish, sans-serif);
  font-size: var(--paragraph-sm, 14px);
  font-weight: 800;
  line-height: 18px;
  color: inherit;
}

.fee-panel__sublabel {
  font-family: var(--font-primary, Mulish, sans-serif);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  line-height: 16px;
  color: inherit;
}

/* ---------- List ---------- */
/* Specificity bump beats `.list--spacing-none` from list-item.module. */
.product-card__list.list {
  margin-bottom: var(--container-padding-lg, 40px);
  list-style: none !important;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large, 16px);
}

.product-card__list .list__item {
  list-style: none !important;
  padding-left: 0;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--gap-medium, 10px) !important;
  width: 100%;
}

.product-card__list .list__text {
  flex: 1 1 auto;
  display: inline;
}

.product-card__list .list__item::marker {
  content: none;
  display: none;
}

.product-card__list .list__icon {
  width: 24px !important;
  height: 24px !important;
  font-size: var(--paragraph-xl, 24px) !important;
  line-height: 1 !important;
  color: var(--koalect-primary-400, #9FD7CD) !important;
}

.product-card--brand-raisenow .product-card__list .list__icon {
  color: var(--raisenow-primary-500, #F46665) !important;
}

.product-card__list .list__icon i,
.product-card__list .list__icon i::before,
.product-card__list .list__icon svg {
  width: 24px;
  height: 24px;
  font-size: var(--paragraph-xl, 24px);
  line-height: 1;
}

.product-card__list .list__text,
.product-card__list .list__text p {
  font-size: var(--paragraph-lg, 18px);
  font-weight: 400;
  line-height: 22px;
  margin: 0;
}

/* ---------- CTA ---------- */
.product-card__cta {
  margin-top: auto;
}

.product-card__cta .button {
  width: 100%;
  justify-content: center;
}

/* ---------- Responsive ---------- */

/* 3-column layout — cards are narrow even at desktop widths.
   Stack the fee-panel internals so the boxed numeric + meta don't fight for space. */
.product-cards--cols-3 .fee-panel--primary {
  flex-wrap: wrap;
  gap: var(--dnd-row-gap, 8px);
}

.product-cards--cols-3 .fee-panel--secondary {
  flex-direction: column;
  align-items: stretch;
  gap: var(--dnd-row-gap, 8px);
  padding: var(--tag-padding-x-large, 10px);
}

.product-cards--cols-3 .fee-panel__numeric-block--boxed {
  max-width: none;
  width: 100%;
  min-width: 0;
}

/* Tablet — cards get narrow; relax fee-panel inner layout so nothing overflows. */
@media (max-width: 1023px) {
  .fee-panel--primary .fee-panel__numeric {
    font-size: 32px;
    line-height: 32px;
  }

  .fee-panel--primary {
    flex-wrap: wrap;
    gap: var(--dnd-row-gap, 8px);
  }

  /* Stack the meta column above the inner pill so they don't overflow the card. */
  .fee-panel--secondary {
    flex-direction: column;
    align-items: stretch;
    gap: var(--dnd-row-gap, 8px);
    padding: var(--tag-padding-x-large, 10px);
  }

  .fee-panel__numeric-block--boxed {
    max-width: none;
    width: 100%;
    min-width: 0;
  }
}

/* Mobile — stack columns full-width and resize typography */
@media (max-width: 767px) {
  .product-card {
    padding: var(--container-padding-sm, 20px);
    height: auto;
  }

  .product-card__header {
    margin-bottom: var(--gap-large, 16px);
  }

  .product-card__title {
    font-size: var(--paragraph-xl, 24px);
    line-height: 28px;
  }

  .product-card__icon,
  .product-card__icon i,
  .product-card__icon i::before {
    width: 28px;
    height: 28px;
    font-size: 28px;
    line-height: 28px;
  }

  .product-card__subtitle {
    font-size: var(--heading-sm, 20px);
    line-height: 22px;
    margin-bottom: var(--container-padding-md, 12px);
  }

  .product-card__description,
  .product-card__description p,
  .product-card__description li {
    font-size: var(--paragraph-sm, 14px);
    line-height: 18px;
  }

  .product-card__description {
    margin-bottom: var(--container-padding-md, 24px);
  }

  .product-card__fees {
    margin-bottom: var(--container-padding-md, 24px);
  }

  /* Primary fee panel — keep numeric + meta side by side but allow wrap */
  .fee-panel--primary {
    flex-wrap: wrap;
    gap: var(--dnd-row-gap, 8px);
    padding: var(--container-padding-md, 12px);
  }

  .fee-panel--primary .fee-panel__numeric {
    font-size: 28px;
    line-height: 28px;
  }

  /* Secondary fee panel — stack the meta column above the boxed numeric */
  .fee-panel--secondary {
    flex-direction: column;
    align-items: stretch;
    gap: var(--container-padding-md, 12px);
    padding: var(--tag-padding-x-large, 10px);
  }

  .fee-panel__numeric-block--boxed {
    max-width: none;
    width: 100%;
    min-width: 0;
    padding: var(--container-padding-md, 12px);
  }

  .fee-panel--secondary .fee-panel__prefix {
    font-size: var(--paragraph-md, 16px);
    line-height: 20px;
  }

  .fee-panel--secondary .fee-panel__numeric {
    font-size: var(--paragraph-lg, 18px);
    line-height: 22px;
  }

  .product-card__list.list {
    margin-bottom: var(--container-padding-md, 28px);
  }

  .product-card__list .list__text,
  .product-card__list .list__text p {
    font-size: var(--paragraph-md, 16px);
    line-height: 20px;
  }
}