/* Bandenmaatcalculator. Alles blijft onder .rsc-tire-calc. */

.rsc-tire-calc {
    container-type: inline-size;
    container-name: rsc-tire;
    max-width: 100%;
    color: var(--rsc-text);
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
}

.rsc-tire-calc *,
.rsc-tire-calc *::before,
.rsc-tire-calc *::after {
    box-sizing: border-box;
}

.rsc-tire-calc__tabs {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 0 0 32px;
    border-bottom: 1px solid color-mix(in srgb, var(--rsc-text) 14%, transparent);
}

.rsc-tire-calc__tab {
    appearance: none;
    margin: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--rsc-text-muted);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    padding: 16px 20px;
    cursor: pointer;
}

.rsc-tire-calc__tab[aria-selected="true"] {
    color: var(--rsc-text);
    border-bottom-color: var(--rsc-brand);
}

.rsc-tire-calc__panel {
    display: grid;
    gap: 40px;
}

.rsc-tire-calc [hidden] {
    display: none !important;
}

.rsc-tire-calc fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.rsc-tire-calc__legend,
.rsc-tire-calc__card legend,
.rsc-tire-calc__title {
    display: block;
    width: 100%;
    margin: 12px 0 8px;
    padding: 0 0 0 12px;
    border-left: 6px solid var(--rsc-brand);
    color: var(--rsc-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.rsc-tire-calc__generations > .rsc-tire-calc__legend,
.rsc-tire-calc__card > fieldset > legend,
.rsc-tire-calc__visual-card > .rsc-tire-calc__subtitle,
.rsc-tire-calc__tips .rsc-tire-calc__block:first-child > .rsc-tire-calc__title {
    margin-top: 0;
}

.rsc-tire-calc__subtitle {
    margin: 12px 0 8px;
    color: var(--rsc-text);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}

.rsc-tire-calc__generation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}

.rsc-tire-calc__generation {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--rsc-brand);
    border-radius: 0;
    background: var(--rsc-background);
    color: var(--rsc-brand);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transform: scale(1);
    transform-origin: center center;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 90ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rsc-tire-calc__generation input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rsc-tire-calc__generation input:focus,
.rsc-tire-calc__generation input:focus-visible {
    outline: none;
}

.rsc-tire-calc__generation:active {
    transform: scale(0.98);
}

.rsc-tire-calc__generation:focus-within:has(:focus-visible) {
    outline: 2px solid var(--rsc-brand);
    outline-offset: 2px;
}

@media (hover: hover) {
    .rsc-tire-calc__generation:not(:has(input:checked)):hover {
        background: color-mix(in srgb, var(--rsc-brand) 12%, var(--rsc-background));
        border-color: var(--rsc-brand);
        color: var(--rsc-brand);
    }
}

.rsc-tire-calc__generation:has(input:checked) {
    background: var(--rsc-brand);
    color: var(--rsc-background);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--rsc-background) 45%, transparent),
        0 0 0 1px var(--rsc-brand-glow1);
}

.rsc-tire-calc__sizes,
.rsc-tire-calc__visuals {
    display: grid;
    gap: 32px;
}

.rsc-tire-calc__sizes {
    align-items: start;
}

.rsc-tire-calc__models .rsc-tire-calc__generation-list {
    flex-wrap: nowrap;
}

.rsc-tire-calc__card,
.rsc-tire-calc__visual-card,
.rsc-tire-calc__tips {
    min-width: 0;
    padding: 24px 20px;
    border: 0;
    border-top: 2px solid var(--rsc-brand);
    border-radius: 0;
    background: var(--rsc-background2);
    box-shadow: 0 4px 12px var(--rsc-boxshadow2);
}

.rsc-tire-calc__card {
    display: flex;
    flex-direction: column;
}

.rsc-tire-calc__card-foot {
    display: grid;
    gap: 12px;
}

.rsc-tire-calc__card > fieldset {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 24px;
}

.rsc-tire-calc__visual-card {
    display: grid;
    gap: 28px;
}

.rsc-tire-calc__canvas {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 16px 12px 12px;
    background: var(--rsc-background);
}

.rsc-tire-calc__front-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.rsc-tire-calc__dim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}

.rsc-tire-calc__dim-label {
    color: var(--rsc-brand);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.rsc-tire-calc__dim-line {
    display: block;
    width: 100%;
    height: 6px;
    border-right: 1px solid var(--rsc-brand);
    border-left: 1px solid var(--rsc-brand);
}

.rsc-tire-calc__dim--above .rsc-tire-calc__dim-line {
    border-top: 1px solid var(--rsc-brand);
}

.rsc-tire-calc__dim--below .rsc-tire-calc__dim-line {
    border-bottom: 1px solid var(--rsc-brand);
}

.rsc-tire-calc__hint,
.rsc-tire-calc__prompt,
.rsc-tire-calc__lead,
.rsc-tire-calc__disclaimer,
.rsc-tire-calc__tips p,
.rsc-tire-calc__tips li {
    margin: 0;
    color: var(--rsc-text-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.rsc-tire-calc__tips {
    display: grid;
    gap: 40px;
    text-align: left;
}

.rsc-tire-calc__tips ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 12px;
    justify-items: start;
    width: 100%;
    text-align: left;
}

.rsc-tire-calc__tips strong,
.rsc-tire-calc__summary {
    color: var(--rsc-text);
}

.rsc-tire-calc__summary {
    margin: 0;
    font-weight: 700;
}

.rsc-tire-calc__preset[hidden] {
    display: none;
}

.rsc-tire-calc__field {
    display: grid;
    gap: 10px;
    min-width: 0;
    color: var(--rsc-text);
    font-size: 13px;
    font-weight: 600;
}

.rsc-tire-calc__field-label {
    color: var(--rsc-text-muted);
    white-space: nowrap;
}

.rsc-tire-calc__size {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.rsc-tire-calc__size .rsc-tire-calc__field {
    flex: 1 1 auto;
    min-width: max-content;
}

.rsc-tire-calc__slash {
    flex: 0 0 auto;
    padding-bottom: 11px;
    color: var(--rsc-text-muted);
    font-weight: 700;
}

.rsc-tire-calc select {
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 28px 0 12px;
    border: 1px solid var(--rsc-text);
    border-radius: 0;
    background-color: var(--rsc-background);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--rsc-text) 50%),
        linear-gradient(135deg, var(--rsc-text) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--rsc-text);
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    appearance: none;
}

.rsc-tire-calc__compare {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: auto;
    margin: 0;
    border: 1px solid var(--rsc-brand);
    border-radius: 999px;
    background: var(--rsc-brand);
    color: var(--rsc-background);
    padding: 12px 22px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 140ms ease,
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .rsc-tire-calc__compare:hover {
        background: var(--rsc-brand-orange);
        border-color: var(--rsc-brand-orange);
        color: var(--rsc-text-dark);
        transform: scale(1.06);
    }
}

.rsc-tire-calc__error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 0;
    background: color-mix(in srgb, var(--rsc-brand) 12%, var(--rsc-background));
    color: var(--rsc-text);
    font-size: 14px;
}

.rsc-tire-calc__error[hidden],
.rsc-tire-calc__output[hidden],
.rsc-tire-calc__stale[hidden],
.rsc-tire-calc__prompt[hidden] {
    display: none;
}

.rsc-tire-calc__output {
    display: grid;
    gap: 40px;
}

.rsc-tire-calc__output.is-stale .rsc-tire-calc__block,
.rsc-tire-calc__output.is-stale .rsc-tire-calc__tolerance {
    opacity: 0.55;
}

.rsc-tire-calc__stale {
    margin: 0;
    color: var(--rsc-brand);
    font-size: 14px;
    font-weight: 700;
}

.rsc-tire-calc__block {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.rsc-tire-calc__side,
.rsc-tire-calc__front {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 40px;
    min-width: 0;
}

.rsc-tire-calc__side-item,
.rsc-tire-calc__front-item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    gap: 8px;
}

.rsc-tire-calc__caption {
    display: grid;
    gap: 2px;
    justify-items: start;
    text-align: left;
}

.rsc-tire-calc__kicker {
    color: var(--rsc-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.rsc-tire-calc__visual-size,
.rsc-tire-calc__measure-value {
    margin: 0;
    color: var(--rsc-text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

.rsc-tire-calc__measure-value {
    color: var(--rsc-brand);
}

.rsc-tire-calc__plot,
.rsc-tire-calc__front-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: auto;
}

.rsc-tire-calc__side-stage,
.rsc-tire-calc__front-stage {
    position: relative;
    flex: 0 0 auto;
}

.rsc-tire-calc__side-stage {
    margin: 0;
}

.rsc-tire-calc__side-stage .rsc-tire-calc__wheel,
.rsc-tire-calc__side-contour {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.rsc-tire-calc__side-contour,
.rsc-tire-calc__front-contour {
    box-sizing: border-box;
    border: 2px solid var(--rsc-brand);
    pointer-events: none;
    z-index: 2;
}

.rsc-tire-calc__side-contour {
    border-radius: 50%;
}

.rsc-tire-calc__side-diff {
    position: absolute;
    right: -14px;
    width: 2px;
    background: var(--rsc-brand);
}

.rsc-tire-calc__side-diff::before,
.rsc-tire-calc__side-diff::after {
    content: "";
    position: absolute;
    right: 0;
    width: 10px;
    height: 2px;
    background: var(--rsc-brand);
}

.rsc-tire-calc__side-diff::before {
    top: 0;
}

.rsc-tire-calc__side-diff::after {
    bottom: 0;
}

.rsc-tire-calc__front-stage .rsc-tire-calc__tread,
.rsc-tire-calc__front-contour {
    position: absolute;
    left: 0;
    bottom: 0;
}

.rsc-tire-calc__wheel {
    position: relative;
    width: var(--wheel-size, 140px);
    height: var(--wheel-size, 140px);
}

.rsc-tire-calc__rubber,
.rsc-tire-calc__rim,
.rsc-tire-calc__rim-fallback {
    position: absolute;
    border-radius: 50%;
}

.rsc-tire-calc__rubber {
    inset: 0;
    background: radial-gradient(circle at 50% 50%,
        transparent calc(var(--rim-ratio, 0.68) * 50% - 1px),
        #2a2a2a calc(var(--rim-ratio, 0.68) * 50%),
        #4a4a4a calc(var(--rim-ratio, 0.68) * 62%),
        #1a1a1a 78%,
        #111 100%);
    box-shadow: inset 0 0 0 2px #0d0d0d;
}

.rsc-tire-calc__rim,
.rsc-tire-calc__rim-fallback {
    left: 50%;
    top: 50%;
    width: calc(var(--rim-ratio, 0.68) * 100%);
    height: calc(var(--rim-ratio, 0.68) * 100%);
    transform: translate(-50%, -50%);
}

.rsc-tire-calc__rim {
    object-fit: contain;
    z-index: 1;
}

.rsc-tire-calc__rim-fallback {
    display: none;
    z-index: 1;
    background:
        radial-gradient(circle, #e4e7eb 0 16%, #667078 17% 26%, transparent 27% 40%, #c5cad0 41% 100%);
}

.rsc-tire-calc__wheel.is-fallback .rsc-tire-calc__rim {
    display: none;
}

.rsc-tire-calc__wheel.is-fallback .rsc-tire-calc__rim-fallback {
    display: block;
}

.rsc-tire-calc__measure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 12px;
}

.rsc-tire-calc__measure-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--rsc-brand);
}

.rsc-tire-calc__measure-line::before,
.rsc-tire-calc__measure-line::after {
    content: "";
    position: absolute;
    left: -6px;
    width: 13px;
    height: 1px;
    background: var(--rsc-brand);
}

.rsc-tire-calc__measure-line::before {
    top: 0;
}

.rsc-tire-calc__measure-line::after {
    bottom: 0;
}

.rsc-tire-calc__tread {
    width: var(--tread-width, 80px);
    height: var(--tread-height, 120px);
    max-width: 100%;
    border-radius: 0;
    background-color: #1a1a1a;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.16) 0 2px,
        transparent 2px 14px
    );
    box-shadow: inset 0 0 0 2px #111;
}

.rsc-tire-calc__visual-delta {
    margin: 0;
    color: var(--rsc-text-muted);
    font-weight: 700;
    text-align: left;
}

.rsc-tire-calc__visual-delta.is-up,
.rsc-tire-calc__visual-delta.is-down {
    color: var(--rsc-brand);
}

.rsc-tire-calc__visual-delta.is-up,
.rsc-tire-calc__visual-delta.is-down,
.rsc-tire-calc__value.is-up,
.rsc-tire-calc__value.is-down {
    color: var(--rsc-brand);
}

.rsc-tire-calc__value.is-flat,
.rsc-tire-calc__visual-delta.is-flat {
    color: var(--rsc-text-muted);
}

.rsc-tire-calc__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.rsc-tire-calc__table th,
.rsc-tire-calc__table td {
    padding: 10px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--rsc-text) 12%, transparent);
    text-align: left;
    vertical-align: top;
}

.rsc-tire-calc__table tbody tr:nth-child(odd) {
    background: var(--rsc-background);
}

.rsc-tire-calc__table tbody tr:nth-child(even) {
    background: var(--rsc-background2);
}

.rsc-tire-calc__table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--rsc-text) 12%, transparent);
}

.rsc-tire-calc__table thead th {
    font-weight: 700;
    background: var(--rsc-background2);
}

.rsc-tire-calc__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.rsc-tire-calc__table th,
.rsc-tire-calc__table td {
    display: block;
    padding: 0;
    border: 0;
}

.rsc-tire-calc__table th[scope="row"] {
    grid-column: 1 / -1;
    font-weight: 700;
}

.rsc-tire-calc__cell-label {
    display: block;
    margin-bottom: 2px;
    color: var(--rsc-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.rsc-tire-calc__tolerance {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 14px 16px;
    border-left: 6px solid var(--rsc-brand);
    border-radius: 0;
    background: color-mix(in srgb, var(--rsc-brand) 12%, var(--rsc-background));
    color: var(--rsc-text);
}

.rsc-tire-calc__tolerance.is-in {
    border-left-color: var(--rsc-included);
    background: var(--rsc-premium);
}

.rsc-tire-calc__tolerance.is-out {
    border-left-color: var(--rsc-brand);
    background: color-mix(in srgb, var(--rsc-brand) 12%, var(--rsc-background));
}

.rsc-tire-calc__tolerance-title,
.rsc-tire-calc__tolerance p {
    margin: 0;
}

.rsc-tire-calc__tolerance-title {
    font-weight: 700;
}

.rsc-tire-calc__disclaimer {
    font-size: 13px;
}

.rsc-tire-calc :focus-visible {
    outline: 2px solid var(--rsc-brand);
    outline-offset: 2px;
}

@media (min-width: 960px) {
    .rsc-tire-calc__sizes,
    .rsc-tire-calc__visuals {
        grid-template-columns: 1fr 1fr;
    }

    .rsc-tire-calc__table thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .rsc-tire-calc__table tr {
        display: table-row;
        padding: 0;
        border: 0;
    }

    .rsc-tire-calc__table th,
    .rsc-tire-calc__table td {
        display: table-cell;
        padding: 10px 8px;
        border-bottom: 1px solid color-mix(in srgb, var(--rsc-text) 12%, transparent);
    }

    .rsc-tire-calc__cell-label {
        display: none;
    }
}

@container rsc-tire (min-width: 720px) {
    .rsc-tire-calc__card,
    .rsc-tire-calc__visual-card,
    .rsc-tire-calc__tips {
        padding: 32px;
    }

    .rsc-tire-calc__sizes,
    .rsc-tire-calc__visuals {
        grid-template-columns: 1fr 1fr;
    }

    .rsc-tire-calc__table thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .rsc-tire-calc__table tr {
        display: table-row;
        padding: 0;
        border: 0;
    }

    .rsc-tire-calc__table th,
    .rsc-tire-calc__table td {
        display: table-cell;
        padding: 10px 8px;
        border-bottom: 1px solid color-mix(in srgb, var(--rsc-text) 12%, transparent);
    }

    .rsc-tire-calc__cell-label {
        display: none;
    }
}

@container rsc-tire (max-width: 719px) {
    .rsc-tire-calc__sizes,
    .rsc-tire-calc__visuals {
        grid-template-columns: 1fr;
    }

    .rsc-tire-calc__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .rsc-tire-calc__table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
        padding: 12px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--rsc-text) 12%, transparent);
    }

    .rsc-tire-calc__table th,
    .rsc-tire-calc__table td {
        display: block;
        padding: 0;
        border: 0;
    }

    .rsc-tire-calc__table th[scope="row"] {
        grid-column: 1 / -1;
    }

    .rsc-tire-calc__cell-label {
        display: block;
    }
}