/* Treatment Price List — frontend styles
 * Recreates the look from the supplied design: dark navy heading + name,
 * grey description, dotted leader line connecting name to price.
 */

.tpl-pricelist {
    --tpl-color-primary: #0f3a5b;       /* dark teal/navy used for headings + names + price */
    --tpl-color-text:    #4a4a4a;       /* description grey */
    --tpl-color-dots:    #9b9b9b;       /* dotted leader line */
    --tpl-font-family:   inherit;       /* honour theme typography by default */
    --tpl-heading-size:  2.2rem;
    --tpl-name-size:     1.05rem;
    --tpl-desc-size:     0.85rem;
    --tpl-price-size:    1.05rem;
    --tpl-row-gap:       1.4rem;

    color: var(--tpl-color-text);
    font-family: var(--tpl-font-family);
    line-height: 1.45;
    max-width: 880px;
    margin: 0 auto;
}

.tpl-pricelist * {
    box-sizing: border-box;
}

/* Category heading */
.tpl-pricelist-heading {
    color: var(--tpl-color-primary);
    font-size: var(--tpl-heading-size);
    font-weight: 700;
    margin: 0 0 1.4rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.tpl-pricelist-category + .tpl-pricelist-category {
    margin-top: 2.6rem;
}

.tpl-pricelist-rows {
    display: flex;
    flex-direction: column;
    gap: var(--tpl-row-gap);
}

/* Row */
.tpl-pricelist-row-top {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.tpl-pricelist-name {
    color: var(--tpl-color-primary);
    font-size: var(--tpl-name-size);
    font-weight: 700;
    margin: 0;
    flex: 0 0 auto;
    line-height: 1.3;
}

.tpl-pricelist-price {
    color: var(--tpl-color-primary);
    font-size: var(--tpl-price-size);
    font-weight: 700;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The dotted leader line between name and price */
.tpl-pricelist-dots {
    flex: 1 1 auto;
    border-bottom: 2px dotted var(--tpl-color-dots);
    transform: translateY(-3px);
    min-width: 1.5rem;
}

.tpl-pricelist-desc {
    color: var(--tpl-color-text);
    font-size: var(--tpl-desc-size);
    margin: 0.35rem 0 0;
    line-height: 1.4;
    opacity: 0.85;
}

/* Mobile */
@media (max-width: 540px) {
    .tpl-pricelist {
        --tpl-heading-size: 1.6rem;
        --tpl-name-size:    1rem;
        --tpl-price-size:   1rem;
    }
    .tpl-pricelist-row-top {
        flex-wrap: wrap;
    }
    .tpl-pricelist-dots {
        display: none;
    }
    .tpl-pricelist-name {
        flex: 1 1 100%;
    }
    .tpl-pricelist-price {
        flex: 1 1 100%;
        margin-top: 0.15rem;
    }
}