.prica {
  container-type: inline-size;
  container-name: prica;
}

.prica__plans {
  grid-gap: 0 10px;
  --prica-border-width: 2px;
}

.prica__plan {
  border: var(--prica-border-width) solid;
  display: flex;
  flex-direction: column;
  padding: 0; /* resetting forms.css */
}

.prica__plan-top {
  padding: 21px;
}

.prica__tab {
  border: var(--prica-border-width) solid;
  border-bottom: none;
  position: relative;

  container-type: inline-size;
  container-name: tab;

  :target + &,
  .prica__plans:not(:has(:target)) > &:nth-child(2) {
    margin-bottom: calc(var(--prica-border-width) * -1);
  }
}

.prica__plan-name {
  padding-top: var(--plan-pad, 17px);
  padding-inline: var(--plan-pad, 17px);
  @container (width < 247px) {
    --plan-pad: 6.882cqw;
  }
}

.prica__plan-pricing,
.prica__custom-price {
  padding-bottom: var(--plan-pad, 17px);
  padding-inline: var(--plan-pad, 17px);
  @container (width < 247px) {
    --plan-pad: 6.882cqw;
  }
}

.prica__plan-flag {
  position: absolute;
  inset: 0 0 auto auto;
  padding: 3px 8px 4px 10px;
  border-radius: 0px 8px 0px 2px;
  margin: calc(var(--prica-border-width) * -1);
}

.prica__plan-price-unit {
  position: relative;
  padding-left: 0.875em;
  margin-left: 0.35em;
  max-width: 5.7em;
  display: inline-block;

  &::before {
    content: "";
    position: absolute;
    border-left: 1px solid;
    inset: 6px auto 0 0;
  }
}

.prica__plan-total-price-calc {
  margin-top: 0.70588235em;
}

.prica__plan-option {
  border: 1px solid;
  margin-bottom: 12px;
  padding: 20px;
}

.prica__plan-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  gap: 16px;
  margin-top: auto;
}

.prica__participants {
  box-sizing: border-box;
  padding: 20px;
  width: 84.3%;
  margin: 2rem auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  @container (width < 500px) {
    flex-direction: column;
    gap: 1em;
    width: fit-content;
  }
}

.prica__plan-option {
  gap: 1em;
}