/* Chapter 17: Simple Auto Service Estimator */
:root {
    color-scheme: light;
    font-family: Arial, Helvetica, sans-serif;
    background: #f2f5f9;
    color: #182638;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 42px 18px; }
.calculator { width: min(100%, 680px); margin: 0 auto; }
.page-header { margin-bottom: 24px; }
.eyebrow { color: #2864ad; font-size: 12px; letter-spacing: .18em; font-weight: 800; margin: 0 0 8px; }
h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 38px); letter-spacing: -.04em; }
.page-header > p:last-child, .section-description { color: #66758b; line-height: 1.5; }
.page-header > p:last-child { margin: 0; }
.panel { background: #fff; border: 1px solid #dde5ee; border-radius: 16px; padding: 26px; box-shadow: 0 8px 26px rgba(25, 48, 75, .05); margin-bottom: 18px; }
h2 { font-size: 21px; margin: 0 0 8px; }
.section-description { margin: 0 0 20px; font-size: 14px; }
.service-list { display: grid; gap: 9px; }
.service-option { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px; border: 1px solid #dce4ef; border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.service-option:hover { background: #f5f9ff; border-color: #9cbce6; }
.service-option:has(input:checked) { background: #eaf3ff; border-color: #3775c1; }
.service-label { display: flex; align-items: center; gap: 13px; min-width: 0; font-weight: 600; }
.service-checkbox { width: 19px; height: 19px; margin: 0; flex-shrink: 0; accent-color: #2864ad; }
.service-price { font-weight: 700; white-space: nowrap; }
.calculate-button { display: block; width: 100%; border: 0; border-radius: 10px; margin-top: 22px; padding: 16px; background: #245fa8; color: white; font: inherit; font-weight: 750; cursor: pointer; transition: background .15s; }
.calculate-button:hover { background: #174980; }
.calculate-button:focus-visible, .service-checkbox:focus-visible { outline: 3px solid #83baff; outline-offset: 3px; }
.results-panel h2 { margin-bottom: 18px; }
.total-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; color: #506277; }
.total-row output { font-weight: 700; color: #182638; }
.grand-total { border-top: 2px solid #e3eaf2; margin-top: 8px; padding-top: 19px; font-size: 22px; color: #182638; }
.grand-total output { color: #205ca6; }
.note { margin: 13px 0 0; color: #7a889a; font-size: 12px; line-height: 1.5; }
@media (max-width: 480px) { body { padding: 22px 12px; } .panel { padding: 19px 16px; } .service-option { padding: 15px 12px; } .service-label { gap: 9px; font-size: 14px; } }

/* Random-discount challenge: JavaScript will update the outputs. */
.coupon-panel .section-description { margin-bottom: 0; }
.discount-button { background: #234e79; }
.discount-button:hover { background: #173854; }
.coupon-result { text-align: center; margin: 16px 0 0; color: #506277; font-weight: 600; }
.coupon-result output { color: #205ca6; font-weight: 800; }