.wd-plan-comparison-table {
    --wd-pct-bg: var(--wp--preset--color--white)
    --wd-pct-text: var(--wp--preset--color--black);
    --wd-pct-muted-text: var(--wp--preset--color--black);
    --wd-pct-border: var(--wp--preset--color--cyan-bluish-gray);
    --wd-pct-featured-bg: var(--wp--preset--color--primary);
    --wd-pct-featured-text: var(--wp--preset--color--white);
    --wd-pct-button-bg: transparent;
    --wd-pct-button-text: var(--wp--preset--color--black);
    --wd-pct-button-border: var(--wp--preset--color--black);
    --wd-pct-featured-button-bg: var(--wp--preset--color--white);
    --wd-pct-featured-button-text: var(--wp--preset--color--black);
    --wd-pct-check-bg: var(--wp--preset--color--black);
    --wd-pct-check-color: var(--wp--preset--color--white);
    --wd-pct-featured-check-bg: var(--wp--preset--color--white);
    --wd-pct-featured-check-color: var(--wp--preset--color--black);
    --wd-pct-cell-padding-x: var(--wp--preset--spacing--40, 32px);
    --wd-pct-cell-padding-y: var(--wp--preset--spacing--30, 20px);
    --wd-pct-header-padding-x: var(--wp--preset--spacing--40, 32px);
    --wd-pct-header-padding-y: var(--wp--preset--spacing--40, 32px);
    --wd-pct-table-radius: var(--wp--preset--spacing--16);
    --wd-pct-button-radius: 999px;
    --wd-pct-plan-font-size: inherit;
    --wd-pct-feature-font-size: inherit;
    --wd-pct-cell-font-size: inherit;
    --wd-pct-plan-font-weight: 700;
    --wd-pct-feature-font-weight: 400;
    --wd-pct-cell-font-weight: 400;

    width: 100%;
    color: var(--wd-pct-text);
}

.wd-plan-comparison-table__scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wd-plan-comparison-table__table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--wd-pct-bg);
    border: 1px solid var(--wd-pct-border);
    border-radius: var(--wd-pct-table-radius);
    overflow: hidden;
}

.wd-plan-comparison-table__table th,
.wd-plan-comparison-table__table td {
    box-sizing: border-box;
    vertical-align: middle;
}

.wd-plan-comparison-table__table thead th {
    padding: var(--wd-pct-header-padding-y) var(--wd-pct-header-padding-x);
    text-align: center;
    color: var(--wd-pct-text);
    background: var(--wd-pct-bg);
}

.wd-plan-comparison-table__feature-heading {
    width: 45%;
    text-align: left !important;
    font-size: var(--wd-pct-plan-font-size);
    font-weight: var(--wd-pct-plan-font-weight);
}

.wd-plan-comparison-table__plan-heading {
    position: relative;
    font-size: var(--wd-pct-plan-font-size);
    font-weight: var(--wd-pct-plan-font-weight);
}

.wd-plan-comparison-table__plan-heading.is-featured,
.wd-plan-comparison-table__cell.is-featured {
    color: var(--wd-pct-featured-text);
    background: var(--wd-pct-featured-bg);
    border-color: color-mix(in srgb, var(--wd-pct-featured-text) 22%, transparent);
}

.wd-plan-comparison-table__featured-label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--wp--preset--font-size--base-small);
    font-weight: inherit;
    line-height: 1.2;
    text-transform: uppercase;
}

.wd-plan-comparison-table__plan-name {
    display: block;
    margin-bottom: var(--wp--preset--spacing--16);
    line-height: 1.2;
}

.wd-plan-comparison-table__button-wrap {
    display: inline-block;
}

.wd-plan-comparison-table__button {
    padding: var(--wp--custom--button-padding, var(--wp--preset--spacing--30, 0.667em) var(--wp--preset--spacing--50, 1.333em));
    border: 1px solid var(--wd-pct-button-border);
    border-radius: var(--wd-pct-button-radius);
    background: var(--wd-pct-button-bg);
    color: var(--wd-pct-button-text);
    font-weight: inherit;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.wd-plan-comparison-table__plan-heading.is-featured .wd-plan-comparison-table__button {
    border-color: var(--wd-pct-featured-button-bg);
    background: var(--wd-pct-featured-button-bg);
    color: var(--wd-pct-featured-button-text);
}

.wd-plan-comparison-table__feature-label,
.wd-plan-comparison-table__cell {
    padding: var(--wd-pct-cell-padding-y) var(--wd-pct-cell-padding-x);
    border-top: 1px solid var(--wd-pct-border);
}

.wd-plan-comparison-table__feature-label {
    color: var(--wd-pct-muted-text);
    text-align: left;
    font-size: var(--wd-pct-feature-font-size);
    font-weight: var(--wd-pct-feature-font-weight);
    line-height: 1.35;
}

.wd-plan-comparison-table__cell {
    color: var(--wd-pct-text);
    text-align: center;
    font-size: var(--wd-pct-cell-font-size);
    font-weight: var(--wd-pct-cell-font-weight);
    line-height: 1.35;
}

.wd-plan-comparison-table__value-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}

.wd-plan-comparison-table__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wp--preset--spacing--24);
    height: var(--wp--preset--spacing--24);;
    border-radius: 999px;
    background: var(--wd-pct-check-bg);
    color: var(--wd-pct-check-color);
    font-size: var(--wp--preset--font-size--base-small);
    font-weight: 700;
    line-height: 1;
}

.wd-plan-comparison-table__check--featured {
    background: var(--wd-pct-featured-check-bg);
    color: var(--wd-pct-featured-check-color);
}

.wd-plan-comparison-table__text-value {
    display: inline-block;
    max-width: 100%;
}

.wd-plan-comparison-table__empty {
    opacity: 0.45;
}

@media (max-width: 781px) {
    .wd-plan-comparison-table {
        width: 100%;
    }

    .wd-plan-comparison-table__scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: 8px;
    }

    .wd-plan-comparison-table__table {
        display: table !important;
        width: 640px;
        min-width: 640px;
        max-width: none;
        table-layout: fixed;
    }

    .wd-plan-comparison-table__table thead {
        display: table-header-group !important;
    }

    .wd-plan-comparison-table__table tbody {
        display: table-row-group !important;
    }

    .wd-plan-comparison-table__table tr {
        display: table-row !important;
    }

    .wd-plan-comparison-table__table th,
    .wd-plan-comparison-table__table td {
        display: table-cell !important;
        float: none !important;
        width: auto;
    }

    .wd-plan-comparison-table__table thead th {
        padding: var(--wp--preset--spacing--16);
    }

    .wd-plan-comparison-table__feature-heading {
        width: 34% !important;
    }

    .wd-plan-comparison-table__feature-label,
    .wd-plan-comparison-table__cell {
        padding: var(--wp--preset--spacing--16);
    }

    .wd-plan-comparison-table__plan-name {
        margin-bottom: var(--wp--preset--spacing--16);
    }

    .wd-plan-comparison-table__button-wrap {
        display: none;
    }

    .wd-plan-comparison-table__plan-name {
        margin-bottom: 0;
    }

    .wd-plan-comparison-table__button {
        min-width: 0;
        padding: var(--wp--custom--button-padding, 10px 16px);
        font-size: var(--wp--preset--font-size--base);
    }

    .wd-plan-comparison-table__check {
        width: var(--wp--preset--spacing--24);
        height: var(--wp--preset--spacing--24);
        font-size: var(--wp--preset--font-size--base);
    }
}

@media (max-width: 480px) {
    .wd-plan-comparison-table__table {
        width: 600px;
        min-width: 600px;
    }

    .wd-plan-comparison-table__table thead th {
        padding: var(--wp--preset--spacing--16);
    }

    .wd-plan-comparison-table__feature-label,
    .wd-plan-comparison-table__cell {
        padding: var(--wp--preset--spacing--16);
    }

    .wd-plan-comparison-table__feature-heading {
        width: 32% !important;
    }
}

/* Tablet fix: keep the comparison table using the full viewport width when the theme's constrained layout makes it too narrow. */
@media (min-width: 782px) and (max-width: 1180px) {
    .wp-block-wisedigital-plan-comparison-table.wd-plan-comparison-table,
    .wd-plan-comparison-table.wp-block-wisedigital-plan-comparison-table {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        box-sizing: border-box;
    }

    .wp-block-wisedigital-plan-comparison-table.wd-plan-comparison-table .wd-plan-comparison-table__scroll,
    .wd-plan-comparison-table.wp-block-wisedigital-plan-comparison-table .wd-plan-comparison-table__scroll {
        width: 100%;
        max-width: 100%;
    }

    .wp-block-wisedigital-plan-comparison-table.wd-plan-comparison-table .wd-plan-comparison-table__table,
    .wd-plan-comparison-table.wp-block-wisedigital-plan-comparison-table .wd-plan-comparison-table__table {
        width: 100%;
        min-width: 100%;
    }
}
