.build-cost-section{padding:var(--section-padding-top, 3.6rem) 0 var(--section-padding-bottom, 3.6rem)}.build-cost__container{max-width:120rem;margin:0 auto;padding:0 2rem;display:flex;flex-direction:column;align-items:center}.build-cost__header{text-align:center;margin-bottom:6rem}.build-cost__title{margin:0;color:rgb(var(--color-foreground))}.build-cost__content{position:relative;display:flex;align-items:flex-start;gap:4rem;margin-bottom:4rem;justify-content:center;width:100%;max-width:120rem;margin-left:auto;margin-right:auto;padding:0}.chart-with-labels{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;width:100%;padding:0 2rem;overflow:visible}.donut-chart-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;min-height:32rem}.donut-chart{position:relative;width:32rem;height:32rem;margin:0 auto}.donut-chart canvas{width:100%!important;height:100%!important}.chart-label{position:absolute;display:flex;align-items:center;gap:.8rem;pointer-events:auto;z-index:10;max-width:6rem;word-wrap:break-word;overflow-wrap:break-word}.chart-label.label--right{max-width:9rem}.chart-label__color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:block}.chart-label__content{display:flex;flex-direction:column;gap:.2rem;background:none;padding:0;min-width:9rem;position:relative;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.chart-label.label--right .chart-label__content{max-width:9rem}.chart-label__name{font-size:14px;font-weight:400;color:rgb(var(--color-foreground));line-height:1.2;opacity:.7;word-wrap:break-word;overflow-wrap:break-word}.chart-label__amount{font-size:1.2rem;font-weight:600;color:rgb(var(--color-foreground));line-height:1.2}.cost-legend{position:absolute;top:0;right:0;display:flex;flex-direction:column;gap:1.5rem;min-width:18rem;background:none;padding:0}.cost-legend__item{display:flex;align-items:center;gap:1rem}.cost-legend__color{width:8px;height:8px;border-radius:50%;flex-shrink:0}.cost-legend__name{font-size:14px;font-weight:400;color:rgb(var(--color-foreground));opacity:.7}.cost-legend__color--labor{background-color:#8c63da}.cost-legend__color--total-accessories{background-color:#8979ff}.cost-legend__color--commission-10{background-color:#ff928a}.cost-legend__color--paintjob{background-color:#3cc3df}.cost-legend__color--alignment{background-color:#ffae4c}.cost-legend__color--camber-toe{background-color:#537ff1}.cost-legend__color--wires{background-color:#6fd195}.build-cost__total{text-align:center;margin-top:2rem;width:fit-content;margin-left:auto;margin-right:auto}.total-project{display:flex;flex-direction:column;align-items:center;gap:.5rem}.total-project__label{font-size:1.4rem;font-weight:500;color:rgba(var(--color-foreground),.7);text-transform:uppercase;letter-spacing:.1em}.total-project__amount{font-size:3.2rem;font-weight:700;color:rgb(var(--color-foreground))}@media screen and (max-width:1200px){.build-cost__content{padding-right:0;min-width:auto}.cost-legend{right:-8rem;min-width:16rem}}@media screen and (max-width:990px){.build-cost__content{flex-direction:column;gap:3rem;padding-right:0;padding-left:0;min-width:auto;align-items:center}.donut-chart{width:30rem;height:30rem}.total-project__amount{font-size:2.8rem}.chart-label__content{min-width:7rem}.chart-label__name,.chart-label__amount{font-size:1rem}.cost-legend{position:static;margin-top:2rem;min-width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}.cost-legend__name{font-size:1.2rem}}@media screen and (max-width:750px){.build-cost__container{padding:0 1rem}.build-cost__header{margin-bottom:3rem}.donut-chart{width:18rem;height:18rem}.total-project__amount{font-size:2.4rem}.total-project__label{font-size:1.2rem}.chart-label__content{min-width:7rem}.chart-label.label--left .chart-label__content{transform:translate(50px)}.chart-label.label--right .chart-label__content{transform:translate(-50px)}.cost-legend{position:static;margin-top:2rem;min-width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}.chart-label[style*="translate(-100%, -50%)"] .chart-label__content{transform:translate(50px)}.chart-label[style*="translate(0, -50%)"]{flex-direction:row}.chart-label[style*="translate(0, -50%)"] .chart-label__content{transform:translate(-50px)}}@media screen and (max-width:520px){.build-cost__content{padding-left:0;padding-right:0}.donut-chart{width:12rem;height:12rem}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/component-build-cost.css.map */
