/* Typography, colour and background are inherited from the design theme, the
   borders are drawn with a translucent currentColor so they suit a light and a
   dark theme alike, and nothing is marked !important. */

.packagepricing-table {
    font: inherit;
    color: inherit;
    border-radius: var(--wa-border-radius, var(--border-radius, var(--rounded-theme, 6px)));
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: transparent;
    margin: 1em 0;
    padding: 0.75em 0.9em;
    max-width: 100%;
    box-sizing: border-box;
}

.packagepricing-table__title {
    font-weight: 600;
    margin-bottom: 0.5em;
    color: inherit;
}

.packagepricing-table table {
    width: 100%;
    border-collapse: collapse;
    background: none;
    font: inherit;
    color: inherit;
    margin: 0;
    /* Without this the table stretches the page on a narrow screen. */
    table-layout: fixed;
}

.packagepricing-table th:first-child,
.packagepricing-table td:first-child {
    width: 45%;
}

.packagepricing-table th,
.packagepricing-table td {
    padding: 0.4em 0.5em;
    text-align: left;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    vertical-align: middle;
    background: none;
    color: inherit;
}

.packagepricing-table thead th {
    font-weight: 600;
    opacity: 0.65;
    font-size: 0.9em;
}

.packagepricing-table tbody tr:last-child td {
    border-bottom: none;
}

.packagepricing-table td:last-child,
.packagepricing-table th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.packagepricing-table .ruble {
    white-space: nowrap;
}

.packagepricing-cart__line {
    padding: 0.4em 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.packagepricing-cart__line:last-child {
    border-bottom: none;
}

.packagepricing-cart__name {
    font-weight: 600;
}

.packagepricing-cart__detail {
    opacity: 0.85;
}

.packagepricing-cart__saving {
    opacity: 0.75;
    white-space: nowrap;
}

.packagepricing-cart__hint {
    margin-top: 0.35em;
    padding-left: 0.7em;
    border-left: 2px solid color-mix(in srgb, currentColor 35%, transparent);
    font-weight: 600;
}

@media (max-width: 480px) {
    .packagepricing-table {
        padding: 0.6em 0.7em;
    }

    .packagepricing-table th,
    .packagepricing-table td {
        padding: 0.35em 0.3em;
        font-size: 0.95em;
    }
}

@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .packagepricing-table {
        border-color: rgba(128, 128, 128, 0.3);
    }

    .packagepricing-table th,
    .packagepricing-table td,
    .packagepricing-cart__line {
        border-bottom-color: rgba(128, 128, 128, 0.2);
    }

    .packagepricing-cart__hint {
        border-left-color: rgba(128, 128, 128, 0.45);
    }
}