/* tokens */
.pricing,
.pricing-promo {
    --pricing-font-size-small: 0.75rem;
    --pricing-card-bg-color: var(--content-bg-color);
    --pricing-card-border-color: var(--col-gray-medium);
    --pricing-muted-text-color: var(--col-gray-medium);
    --pricing-secondary-bg-color: var(--content-alternate-bg-color);
    --pricing-success-text-color: var(--col-primary-dark);
}

/* header */
body.prices .pricing-header {
    display: grid;
    grid-template-areas:
        "title"
        "tag"
        "article";
    column-gap: 1rem;
    margin-bottom: var(--element-margin-bottom);
}

@media (min-width: 500px) {
    body.prices .pricing-header {
        grid-template-areas:
            "title tag"
            "article tag";
    }
}

body.prices .pricing-header > h1 {
    grid-area: title;
}

body.prices .pricing-header > .pricing-article {
    grid-area: article;
}

body.prices .pricing-header > img.pricing-tag {
    align-self: center;
    grid-area: tag;
}

/* layout */
.pricing {
    margin-bottom: var(--element-margin-bottom);
}

.pricing .cards .card > div.card-body {
    padding: calc(var(--body-padding-x)) !important;
}

@container cards (min-width: 600px) {
    .pricing .cards .card-m {
        grid-column: span 12;
    }
}

/* cards */
.cards.pricing-cards {
    gap: 2rem;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

@container (min-width: 950px) {
    .cards.pricing-cards {
        display: grid;
    }

    .cards.pricing-cards .card-m {
        grid-column: span 4;
    }
}

.card.pricing-card {
    background: var(--pricing-card-bg-color);
    border: 1px solid var(--pricing-card-border-color);
}

.pricing-card .card-body {
    margin-bottom: calc(var(--spacing-unit) * 1);
    display: flex;
    flex-direction: column;
}

.card.pricing-card-whitelabel {
    background: var(--pricing-secondary-bg-color);
}

/* promo */
.pricing-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    background: var(--content-alternate-bg-color);
    padding: calc(var(--spacing-unit) * 3);
    border: 2px solid var(--col-primary-dark);
    border-radius: var(--card-border-radius);
    margin-bottom: calc(var(--body-padding-x) / 2);
}

.pricing-promo-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pricing-success-text-color);
    margin: 0 0 calc(var(--spacing-unit) * 0.5);
}

.pricing-promo-conditions {
    font-size: 0.875rem;
    color: var(--pricing-success-text-color);
    opacity: 0.8;
    margin: 0;
}

/* calculator */
#pricing-calculator:not(.pricing-calculator-ready) .pricing-group-price,
#pricing-calculator:not(.pricing-calculator-ready) .pricing-slider-row,
#pricing-calculator:not(.pricing-calculator-ready) .pricing-slider-notice {
    display: none;
}

#pricing-calculator:not(.pricing-calculator-ready) .pricing-slider-heading label::after {
    content: ' (JavaScript vereist)';
    font-weight: normal;
    color: var(--pricing-muted-text-color);
}

.pricing-calculator {
    display: flex;
    flex-direction: column;
}

@container (min-width: 700px) {
    .pricing-calculator {
        flex-direction: row;
        justify-content: space-evenly;
        gap: 2rem;
    }
}

.pricing-calculator .pricing-calculator-form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
}

.pricing-calculator .pricing-calculator-field {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.pricing-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-panel ul {
    padding-left: 0;
    list-style: none;
    margin-top: 0;
}

.pricing-panel ul li {
    text-wrap: balance;
    position: relative;
    padding-left: 1.5rem;
}

.pricing-panel ul li::before {
    position: absolute;
    left: 0;
    color: var(--col-secondary-dark);
    content: '✔';
}

.pricing-panel .btn {
    align-self: end;
}

/* billing */
.pricing-billing .btn {
    margin-bottom: 0;
}

.pricing-calculator .pricing-billing {
    display: flex;
    gap: calc(var(--spacing-unit) * 1);
}

.pricing-calculator .pricing-billing .btn {
    padding: calc(var(--spacing-unit));
}

.pricing-calculator .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.pricing-calculator .btn-outline-primary {
    border: 1px solid var(--col-primary-dark);
    color: var(--col-primary-dark);
    background: transparent;
}

.pricing-calculator .btn-check:checked + .btn-outline-primary {
    background: var(--col-primary-dark);
    color: var(--col-primary-very-light);
}

/* slider */
.pricing-slider {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.pricing-slider-heading {
    margin-bottom: calc(var(--spacing-unit) * 1);
}

.pricing-slider-notice {
    font-size: 1rem;
    color: var(--pricing-muted-text-color);
}

.pricing-slider-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
}

.pricing-slider-row input[type="range"] {
    accent-color: var(--col-primary-dark);
    flex: 1;
}

.pricing-slider-minmax {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--pricing-muted-text-color);
    margin-top: calc(var(--spacing-unit) * 0.75);
}

/* price component */
.pricing .price-list {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.5rem;
    align-items: center;
}

.pricing .price-row {
    display: contents;
}

.pricing .price {
    position: relative;
    justify-self: end;
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pricing .price .cents {
    font-size: 0.55em;
    padding-top: 0.1em;
}

.pricing .price.strike::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to left top,
        transparent calc(50% - 0.5px),
        currentColor calc(50% - 0.5px),
        currentColor calc(50% + 0.5px),
        transparent calc(50% + 0.5px)
    );
}

.pricing-user-price {
    font-weight: 600;
    color: var(--col-secondary-dark);
}

.pricing-user-price .price {
    font-size: 2.5rem;
}

.pricing-price-sub {
    font-size: var(--pricing-font-size-small);
    margin: 0;
    color: var(--content-text-color);
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}

/* footer */
.pricing-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .pricing-footer {
        flex-direction: row;
    }
}