.dts-date-field {
    display: grid;
    gap: 8rem;
    margin: 18rem 0;
}

.dts-date-field > label {
    font-weight: 700;
}

.dts-date-field select {
    width: 100%;
    min-height: 46rem;
    padding: 8rem 12rem;
    border: 1rem solid var(--color-border, #c9ceca);
    border-radius: 4rem;
    background: #fff;
    color: var(--color-text, #17201d);
}

.dts-date-field select:focus {
    border-color: var(--color-primary, #087f71);
    outline: 2rem solid color-mix(in srgb, var(--color-primary, #087f71) 24%, transparent);
    outline-offset: 1rem;
}

.dts-date-price,
.dts-date-field__empty {
    min-height: 20rem;
    margin: 0;
    color: var(--color-muted, #59635f);
    font-size: 15rem;
}

.dts-date-price:not(:empty) {
    color: var(--color-primary, #087f71);
    font-weight: 700;
}

.dts-price-ladder {
    display: grid;
    gap: 6rem;
    padding: 10rem;
    border: 1rem solid var(--color-border, #d9dfdc);
    border-radius: 6rem;
    background: var(--color-surface-soft, #f5f8f7);
}

.dts-price-ladder[hidden],
.dts-price-summary[hidden] {
    display: none;
}

.dts-price-ladder__row,
.dts-price-summary p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12rem;
}

.dts-price-ladder__row {
    min-height: 34rem;
    padding: 6rem 8rem;
    width: 100%;
    border: 0;
    border-radius: 4rem;
    background: transparent;
    color: var(--color-muted, #59635f);
    font-size: 13rem;
    text-align: left;
    cursor: pointer;
}

.dts-price-ladder__row.is-active {
    background: #fff;
    color: var(--color-text, #17201d);
    box-shadow: 0 1rem 4rem rgba(17, 31, 27, 0.08);
}

.dts-price-ladder__row:hover {
    background: rgba(255, 255, 255, 0.7);
}

.dts-price-ladder__row:focus-visible {
    outline: 2rem solid var(--color-primary, #087f71);
    outline-offset: 1rem;
}

.dts-price-summary {
    display: grid;
    gap: 6rem;
    padding-top: 4rem;
}

.dts-price-summary p {
    margin: 0;
    color: var(--color-muted, #59635f);
    font-size: 14rem;
}

.dts-price-summary strong {
    color: var(--color-text, #17201d);
    font-size: 17rem;
}

.dts-pricing-unavailable {
    cursor: not-allowed;
    opacity: 0.58;
}

@media (max-width: 460px) {
    .dts-price-ladder__row,
    .dts-price-summary p {
        align-items: flex-start;
        flex-direction: column;
        gap: 3rem;
    }
}