/* Prices page (/prices/). Builds on the op- classes of css/online-payments.css. */

.pp-page h4 { margin: 0; }
.pp-page section[id] { scroll-margin-top: 110px; }

/* Hero summary card */
.pp-hero-inner { align-items: stretch; }
.pp-hero-inner .op-hero-text { align-self: center; }
.pp-facts {
  display: flex;
  flex-direction: column;
  background: var(--bgdark, #2c2c62);
  color: #fff;
  border-radius: 32px;
  padding: 36px;
}
.pp-facts-title {
  margin: 0;
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-size: 18px;
  font-weight: 700;
  opacity: 0.85;
}
.pp-facts-list { display: flex; flex-direction: column; gap: 22px; margin-top: 24px !important; }
.pp-facts-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.pp-facts-list li:last-child { padding-bottom: 0; border-bottom: none; }
.pp-fact-value {
  flex-shrink: 0;
  min-width: 96px;
  font-family: var(--h2-font-family, "Nunito", sans-serif);
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  color: var(--light-purple, #cfd5f6);
}
.pp-fact-label { font-size: 16px; line-height: 1.4; }
.pp-facts-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto !important;
  padding-top: 28px;
  font-size: 14px;
  opacity: 0.8;
}
.pp-note-icon { flex-shrink: 0; width: 20px; height: 20px; }

/* Shared bits */
.pp-checklist { display: flex; flex-direction: column; gap: 10px; }
.pp-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--dark-purple, #4a4a8d);
}
.pp-check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  background: var(--extra-light-purple, #ebe9fe);
  color: var(--purple-accent, #7272ec);
  stroke-width: 2.6;
}
.pp-checklist-compact li { font-size: 15px; }
.pp-checklist-light li { color: #fff; }
.pp-checklist-light .pp-check-icon { background: rgba(114, 114, 236, 0.35); color: #fff; }

.pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pp-price-amount {
  font-family: var(--h2-font-family, "Nunito", sans-serif);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--extra-dark-purple, #2c2c62);
}
.pp-price-unit { font-size: 16px; color: var(--dark-purple, #4a4a8d); }
.pp-price-text .pp-price-amount { font-size: 30px; line-height: 48px; overflow-wrap: anywhere; }

.pp-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 28px 0 0 !important;
  padding: 26px 28px;
  border-radius: 20px;
  /*background: rgba(255, 255, 255, 0.6);*/
  font-size: 15px;
  line-height: 1.5;
  color: var(--dark-purple, #4a4a8d);
}
.pp-hint .pp-note-icon { color: var(--purple-accent, #7272ec); }

.pp-note { margin-top: 14px !important; font-size: 14px; line-height: 1.5; color: var(--dark-purple, #4a4a8d); opacity: 0.85; }

/* SaaS plans */
.pp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.pp-plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 25px;
  padding: 32px;
  border: 2px solid transparent;
  transition: border-color var(--duration-ui, 200ms) ease, transform var(--duration-ui, 200ms) var(--ease-out, ease);
}
.pp-plan:hover { border-color: var(--light-purple, #cfd5f6); }
.pp-plan-tag {
  font-family: var(--button-font-family, "Nunito", sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--purple-accent, #7272ec);
}
.pp-plan-name {
  margin-top: 6px !important;
  font-family: var(--h4-font-family, "Nunito", sans-serif);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--extra-dark-purple, #2c2c62);
}
.pp-plan .pp-price { margin-top: 16px; }
.pp-plan .pp-checklist {
  margin: 20px 0 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--extra-light-purple, #ebe9fe);
}
.pp-plan .op-btn { margin-top: auto; }

/* Included */
.pp-included { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pp-included-card { grid-column: span 2; }
.pp-included-card:nth-child(4) { grid-column: 2 / span 2; }
.pp-included-card .pp-checklist { margin-top: 16px !important; }

/* White Label */
.pp-wl {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 20px;
  margin-top: 40px;
}
.pp-wl-card {
  display: flex;
  flex-direction: column;
  background: var(--bgdark, #2c2c62);
  color: #fff;
  border-radius: 32px;
  padding: 40px;
}
.pp-wl-card .pp-plan-name,
.pp-wl-card .pp-price-amount { color: #fff; }
.pp-wl-card .pp-price { margin-top: 12px; }
.pp-wl-card .pp-price-unit { color: rgba(255, 255, 255, 0.8); }
.pp-wl-text { margin-top: 12px !important; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.pp-wl-subtitle {
  margin-top: 28px !important;
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-size: 18px;
  font-weight: 700;
}
.pp-wl-card .pp-checklist { margin: 16px 0 32px !important; }
.pp-wl-card .op-btn { margin-top: auto; }
.pp-wl-details { display: flex; flex-direction: column; gap: 20px; }
.pp-price-group { background: #fff; border-radius: 25px; padding: 32px; }
.pp-group-title {
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--extra-dark-purple, #2c2c62);
}
.pp-rows { margin-top: 8px !important; }
.pp-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--extra-light-purple, #ebe9fe);
}
.pp-row:last-child { border-bottom: none; padding-bottom: 0; }
.pp-row-name {
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--extra-dark-purple, #2c2c62);
}
.pp-row-text { margin-top: 4px !important; font-size: 15px; line-height: 1.45; color: var(--dark-purple, #4a4a8d); }
.pp-row-price,
.pp-badge {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--extra-light-purple, #ebe9fe);
  color: var(--purple-accent, #7272ec);
  font-family: var(--button-font-family, "Nunito", sans-serif);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.pp-advanced { margin-top: 48px; }
.pp-advanced-title {
  font-family: var(--h4-font-family, "Nunito", sans-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--dark-purple, #4a4a8d);
  text-align: center;
}
.pp-advanced-subtitle {
  margin-top: 8px !important;
  font-size: 16px;
  color: var(--dark-purple, #4a4a8d);
  text-align: center;
}

/* Tables */
.pp-table-wrap {
  margin-top: 28px;
  background: #fff;
  border-radius: 25px;
  padding: 8px 28px;
  overflow-x: auto;
}
#compare .pp-table-wrap { margin-top: 40px; }
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th,
.pp-table td {
  padding: 18px 12px;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.45;
  color: var(--dark-purple, #4a4a8d);
  border-bottom: 1px solid var(--extra-light-purple, #ebe9fe);
}
.pp-table tbody tr:last-child th,
.pp-table tbody tr:last-child td { border-bottom: none; }
.pp-table thead th {
  font-family: var(--button-font-family, "Nunito", sans-serif);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--purple-accent, #7272ec);
}
.pp-table tbody th { font-weight: 400; }
.pp-table td {
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-weight: 700;
  color: var(--extra-dark-purple, #2c2c62);
  white-space: nowrap;
}
.pp-table:not(.pp-compare) td { font-size: 20px; width: 18%; }
.pp-cell-name {
  display: block;
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--extra-dark-purple, #2c2c62);
}
.pp-example {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--extra-light-purple, #ebe9fe);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--dark-purple, #4a4a8d);
}
.pp-cell-text { display: block; margin-top: 6px; font-size: 15px; }

.pp-compare th:not(:first-child),
.pp-compare td { text-align: center; width: 28%; }
.pp-compare td { white-space: normal; font-size: 15px; }
.pp-compare thead th:last-child { color: var(--extra-dark-purple, #2c2c62); }
.pp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.pp-mark-icon { width: 18px; height: 18px; stroke-width: 2.6; }
.pp-mark-yes { background: var(--purple-accent, #7272ec); color: #fff; }
.pp-mark-no { background: var(--extra-light-purple, #ebe9fe); color: rgba(74, 74, 141, 0.55); }

/* Services */
.pp-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-service { display: flex; flex-direction: column; }
.pp-service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pp-service .pp-checklist { margin-top: 16px !important; }
.pp-page .pp-link {
  align-self: flex-start;
  margin-top: 18px;
  color: var(--purple-accent, #7272ec);
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.pp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Conditions */
.pp-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-condition-wide { grid-column: 1 / -1; }
.pp-mini-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px !important;
  counter-reset: pp-step;
}
.pp-mini-steps li {
  counter-increment: pp-step;
  position: relative;
  padding: 18px 18px 18px 60px;
  border-radius: 18px;
  background: var(--extra-light-purple, #ebe9fe);
  font-size: 15px;
  line-height: 1.45;
  color: var(--dark-purple, #4a4a8d);
}
.pp-mini-steps li::before {
  content: counter(pp-step);
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple-accent, #7272ec);
  color: #fff;
  font-family: var(--h5-font-family, "Nunito", sans-serif);
  font-weight: 700;
}
.pp-notes {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin-top: 28px !important;
}

@media (prefers-reduced-motion: reduce) {
  .pp-plan { transition: border-color var(--duration-ui, 200ms) ease; }
}

/* Responsive */
@media screen and (max-width: 1100px) {
  .pp-wl { grid-template-columns: 1fr; }
}
@media screen and (max-width: 960px) {
  .pp-hero-inner { grid-template-columns: 1fr; }
  .pp-plans { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .pp-included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-included-card,
  .pp-included-card:nth-child(4) { grid-column: auto; }
  .pp-conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-mini-steps { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .pp-facts { padding: 28px 22px; border-radius: 28px; }
  .pp-fact-value { min-width: 76px; font-size: 32px; }
  .pp-plan, .pp-price-group { padding: 24px; border-radius: 20px; }
  .pp-wl-card { padding: 28px 22px; border-radius: 28px; }
  .pp-price-amount { font-size: 36px; }
  .pp-price-text .pp-price-amount { font-size: 26px; line-height: 40px; }
  .pp-included, .pp-services, .pp-conditions { grid-template-columns: 1fr; }
  .pp-row { flex-direction: column; gap: 8px; }
  .pp-advanced-title { font-size: 22px; }
  .pp-notes { flex-direction: column; align-items: flex-start; }
  .pp-hint { padding: 20px; }
}
@media screen and (max-width: 720px) {
  .pp-table-wrap { padding: 4px 20px; }
  .pp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .pp-table,
  .pp-table tbody,
  .pp-table tr,
  .pp-table th,
  .pp-table td { display: block; width: auto !important; }
  .pp-table tr { padding: 16px 0; border-bottom: 1px solid var(--extra-light-purple, #ebe9fe); }
  .pp-table tbody tr:last-child { border-bottom: none; }
  .pp-table th,
  .pp-table td { padding: 0; border-bottom: none; text-align: left !important; }
  .pp-table tbody th { margin-bottom: 10px; font-weight: 700; color: var(--extra-dark-purple, #2c2c62); }
  .pp-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 16px !important;
    white-space: normal;
  }
  .pp-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-family: var(--body-2-font-family, "Comfortaa", sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--dark-purple, #4a4a8d);
  }
  .pp-compare td { text-align: right !important; }
}