/* Price Listing block.
   Values follow the Figma frames "POLAND: Price list / Desktop" (2040:7860)
   and "POLAND: Price list / Mobile" (2040:7937):
     #00383d dark teal (bar, table header, card outline)
     #f7f7f7 row background        #e3f8ff / #0b8cc6 promo card
     #d4efa8 label pill            #475569 tag pill
     #84cc16 promo seal            #365314 promo seal on lime surfaces
     #1264a3 links                 #0ea5e9 promo badge
   Mobile-first; the desktop layout starts at 768px. */

.price-listing {
  --pl-dark: #00383d;
  --pl-row: #f7f7f7;
  --pl-promo-bg: #e3f8ff;
  --pl-promo-line: #0b8cc6;
  --pl-promo-badge: #0ea5e9;
  --pl-label-bg: #d4efa8;
  --pl-label-text: #0f172a;
  --pl-tag-bg: #475569;
  --pl-lime: #84cc16;
  --pl-lime-dark: #365314;
  /* Seal colour; green surfaces flip this to the dark tint. */
  --pl-promo-icon: var(--pl-lime);
  --pl-text: #3f3f3f;
  --pl-muted: #777;
  --pl-link: #1264a3;
  --pl-border: #d9d9d9;
  --pl-btn: #1d1c1d;

  box-sizing: border-box;
  padding: 24px 16px;
  color: var(--pl-text);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.price-listing *,
.price-listing *::before,
.price-listing *::after {
  box-sizing: inherit;
}

/* The theme styles text elements at element specificity (`p, ul, div
   { color: #000 }`, plus an 18px/27px size), which beats what they would
   inherit from the block — the fee bar's <ul> went black on dark teal and
   the whole block stayed at 18px on mobile. :where() keeps this reset at a
   single class of weight, so every rule below still wins over it. */
.price-listing :where(p, ul, li, div, span, a, del, strong, b) {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.price-listing strong,
.price-listing b {
  font-weight: 700;
}

.price-listing__inner {
  max-width: 1024px;
  margin: 0 auto;
}

.price-listing__inner > :first-child {
  margin-top: 0;
}

.price-listing a {
  color: var(--pl-link);
  text-decoration: none;
}

.price-listing a:hover,
.price-listing a:focus {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .price-listing {
    padding: 60px 24px;
    font-size: 18px;
    line-height: 27px;
  }
}

/* ------------------------------------------------------------------ head */

.price-listing__head {
  margin-bottom: 24px;
  text-align: center;
}

.price-listing__title {
  margin: 0 0 16px;
  font-family: 'AmpleSoftPro-Regular', sans-serif;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  color: var(--pl-text);
}

.price-listing__intro p {
  margin: 0;
}

/* Multi-line intro (e.g. the Czech list): 8px between lines, as in Figma. */
.price-listing__intro p + p {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .price-listing__head {
    margin-bottom: 32px;
  }

  .price-listing__title {
    font-size: 42px;
    line-height: normal;
  }
}

/* ----------------------------------------------------------------- icons */

.pl-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.pl-icon--external,
.pl-icon--pdf {
  width: 16px;
  height: 16px;
}

.pl-icon--promo {
  color: var(--pl-promo-icon);
}

/* Lime/green surfaces: the seal switches to the dark green tint.
   Add .pl-on-lime to any other element given a green background. */
.pl-badge--label,
.pl-on-lime {
  --pl-promo-icon: var(--pl-lime-dark);
}

/* --------------------------------------------------------------- tooltip */

.pl-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.pl-tip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.pl-tip__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  width: 250px;
  transform: translateX(-50%);
  padding: 12px 14px;
  border: 1px solid var(--pl-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  color: var(--pl-text);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}

.pl-tip:hover .pl-tip__bubble,
.pl-tip.is-open .pl-tip__bubble,
.pl-tip__trigger:focus-visible + .pl-tip__bubble {
  opacity: 1;
  visibility: visible;
}

/* Keep the bubble inside the viewport near the edges. */
.pl-tip--start .pl-tip__bubble {
  left: 0;
  transform: none;
}

.pl-tip--end .pl-tip__bubble {
  left: auto;
  right: 0;
  transform: none;
}

/* --------------------------------------------------------------- badges */

.pl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.pl-badge--label {
  background: var(--pl-label-bg);
  color: var(--pl-label-text);
}

.pl-badge--tag {
  background: var(--pl-tag-bg);
  color: #fff;
}

.pl-badge .pl-icon {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------- captions */

.pl-caption {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--pl-text);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .pl-caption {
    justify-content: flex-start;
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---------------------------------------------------------------- links */

.pl-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* -------------------------------------------------------------- heading */

.pl-heading {
  margin: 40px 0 0;
  text-align: center;
}

.price-listing__head + .pl-heading {
  margin-top: 0;
}

.pl-heading--left {
  text-align: left;
}

.pl-heading__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-family: 'AmpleSoftPro-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pl-text);
}

.pl-heading--left .pl-heading__title {
  justify-content: flex-start;
}

.pl-heading__note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin: 16px 0 0;
}

.pl-heading--left .pl-heading__note {
  justify-content: flex-start;
}

.pl-heading__note p,
.pl-heading__note span {
  display: inline;
  margin: 0;
}

.pl-heading__link {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .pl-heading__title {
    font-size: 22px;
  }

  .pl-heading__note {
    gap: 8px;
  }

  .pl-heading__note .pl-icon {
    margin-top: 1.5px;
  }
}

/* ------------------------------------------------------------- fee bar */

.pl-bar {
  margin: 16px 0 0;
  padding: 16px;
  border-radius: 13px;
  background: var(--pl-dark);
  color: #fff;
}

.pl-heading + .pl-bar {
  margin-top: 8px;
}

.pl-bar__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-bar__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.pl-bar__item::before {
  display: none;
}

.pl-bar__label {
  display: flex;
  align-self: flex-start;
}

.pl-bar__values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.pl-bar__name {
  font-family: 'AmpleSoftPro-Regular', sans-serif;
  font-size: 20px;
  line-height: 24px;
}

.pl-bar__old {
  margin-left: auto;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-decoration: line-through;
}

.pl-bar__value {
  margin-left: auto;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.pl-bar__old + .pl-bar__value {
  margin-left: 0;
}

@media (min-width: 768px) {
  .pl-bar {
    padding: 24px;
  }

  .pl-heading + .pl-bar {
    margin-top: 16px;
  }

  .pl-bar__items {
    flex-direction: row;
    flex-wrap: wrap;
    /* Bottom-align so a fee carrying a pill keeps its value on the same
       line as the fees without one. */
    align-items: flex-end;
    justify-content: center;
    gap: 24px 16px;
  }

  .pl-bar__item {
    align-items: flex-start;
    gap: 8px;
  }

  .pl-bar__values {
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* 1px white divider after every fee but the last, 16px from the value. */
  .pl-bar__item:not(:last-child) .pl-bar__values::after {
    content: '';
    flex: 0 0 1px;
    height: 27px;
    margin-left: 8px;
    background: #fff;
  }

  .pl-bar__name {
    font-size: 22px;
  }

  .pl-bar__old,
  .pl-bar__value {
    margin-left: 0;
  }

  .pl-bar__old {
    font-size: 14px;
    line-height: 20px;
  }

  .pl-bar__value {
    font-size: 18px;
    line-height: 27px;
  }
}

/* --------------------------------------------------------------- table */

/* Figma strokes don't take up layout space, CSS borders do: every bordered
   box below trims 1px off its padding so the content keeps the Figma width
   (otherwise rows are 2px narrower and captions wrap early). */
.pl-table {
  margin: 24px 0 0;
  border: 1px solid var(--pl-dark);
  border-radius: 13px;
  background: #fff;
}

.pl-heading + .pl-table {
  margin-top: 16px;
}

.pl-table__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 8px;
  /* Rounded here rather than overflow: hidden on .pl-table, which clipped
     the tooltip bubble opening above the header. */
  border-radius: 12px 12px 0 0;
  background: var(--pl-dark);
  color: #fff;
}

.pl-table__title {
  margin: 0;
  font-family: 'AmpleSoftPro-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
}

.pl-table__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 15px 15px;
}

@media (min-width: 768px) {
  /* A table straight under a heading (no note between) sits 24px below it. */
  .pl-heading + .pl-table {
    margin-top: 24px;
  }

  .pl-table__head {
    padding: 20px 24px 16px;
  }

  .pl-table__title {
    font-size: 22px;
  }

  .pl-table__body {
    gap: 16px;
    padding: 24px 23px 23px;
  }
}

/* ----------------------------------------------------------------- row */

.pl-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 12px 16px;
  border-radius: 5px;
  background: var(--pl-row);
  text-align: center;
}

.pl-row__main,
.pl-row__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.pl-row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pl-row__label {
  font-weight: 600;
}

/* Without this the wrapper keeps the body line-height (27px) around the
   20px caption and every row grows by 7px. */
.pl-row__captions {
  display: flex;
}

.pl-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pl-price__value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.pl-price__note {
  color: var(--pl-text);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .pl-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
  }

  .pl-row__main {
    align-items: flex-start;
    gap: 8px;
  }

  .pl-row__aside {
    align-items: flex-end;
  }

  .pl-row__name {
    justify-content: flex-start;
    gap: 8px;
  }

  .pl-price {
    align-items: flex-end;
    gap: 8px;
  }

  .pl-price__value {
    gap: 8px;
  }

  .pl-price__note {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------- group */

/* Sub-box grouping consecutive rows (e.g. card payments + wallets + promo). */
.pl-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 15px;
  border: 1px solid var(--pl-border);
  border-radius: 5px;
  background: #fff;
}

/* ----------------------------------------------------------- separator */

.pl-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--pl-muted);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
}

.pl-separator::before,
.pl-separator::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--pl-border);
}

@media (min-width: 768px) {
  .pl-separator {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---------------------------------------------------------- promo card */

.pl-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border: 1px solid var(--pl-promo-line);
  border-radius: 5px;
  background: var(--pl-promo-bg);
  text-align: center;
}

.pl-promo__logo {
  flex: 0 0 auto;
}

.pl-promo__logo img {
  display: block;
  width: 114px;
  max-width: none;
  height: auto;
}

.pl-promo__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* Mobile shows the badge above the title. */
.pl-promo__head {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
}

.pl-promo__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--pl-text);
}

.pl-promo__badge {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--pl-promo-badge);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.pl-promo__copy {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.pl-promo__text {
  display: inline;
}

.pl-promo__text p {
  display: inline;
  margin: 0;
}

.pl-promo__link {
  display: inline-flex;
  vertical-align: baseline;
}

/* inline-flex swallows the whitespace between the copy and the link */
.pl-promo__text + .pl-promo__link {
  margin-left: 5px;
}

@media (min-width: 768px) {
  .pl-promo {
    flex-direction: row;
    gap: 16px;
    text-align: left;
  }

  .pl-promo__logo img {
    width: 160px;
  }

  .pl-promo__body {
    flex: 1 1 0;
    width: auto;
  }

  .pl-promo__head {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .pl-promo__title,
  .pl-promo__copy {
    font-size: 18px;
    line-height: 27px;
  }
}

/* ---------------------------------------------------------------- note */

.pl-note {
  margin: 24px 0 0;
  text-align: center;
}

.pl-heading + .pl-note {
  margin-top: 16px;
}

.pl-note--left {
  text-align: left;
}

.pl-note__text {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

.pl-note--left .pl-note__text {
  justify-content: flex-start;
}

.pl-note__text p,
.pl-note__text span {
  display: inline;
  margin: 0;
}

.pl-note__link {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .pl-note__text {
    gap: 8px;
  }

  .pl-note__text .pl-icon {
    margin-top: 1.5px;
  }
}

/* ----------------------------------------------------------------- cta */

.pl-cta {
  margin: 24px 0 0;
  text-align: center;
}

.pl-cta--left {
  text-align: left;
}

.pl-cta--right {
  text-align: right;
}

.price-listing .pl-cta__btn {
  display: inline-block;
  /* 14px 24px in Figma, minus the 1px border the outline variant needs. */
  padding: 13px 23px;
  border: 1px solid var(--pl-btn);
  border-radius: 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
}

.price-listing .pl-cta__btn--dark {
  background: var(--pl-btn);
  color: #fff;
}

.price-listing .pl-cta__btn--dark:hover,
.price-listing .pl-cta__btn--dark:focus {
  background: #000;
  color: #fff;
  text-decoration: none;
}

.price-listing .pl-cta__btn--outline {
  background: transparent;
  color: var(--pl-btn);
}

.price-listing .pl-cta__btn--outline:hover,
.price-listing .pl-cta__btn--outline:focus {
  background: var(--pl-btn);
  color: #fff;
  text-decoration: none;
}

/* ------------------------------------------------------- editor helper */

.price-listing--placeholder {
  padding: 24px;
  border: 1px dashed var(--pl-border, #d9d9d9);
  border-radius: 8px;
  color: #777;
  text-align: center;
}