/* The price picker. The photo, the bright price column and the open package follow the inputs in CSS alone;
   the script only counts the total and carries the choice into the form. */
.prices { padding: 76px var(--gut) 56px; background: var(--ink); }
.prices .head, .picker { max-width: var(--wide); margin: 0 auto; }
.picker { display: grid; gap: 24px; margin-top: 28px; grid-template-areas: 'seg' 'pkgs' 'read' 'add' 'cta'; }
.seg { grid-area: seg; }
.pkgs { grid-area: pkgs; }
.readout { grid-area: read; }
.addons { grid-area: add; }
.picker-cta { grid-area: cta; }
.picker fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.picker legend { padding: 0; margin-bottom: 12px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; color: var(--mute); }
.picker input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; margin: 0; }

/* Vehicle: a two-way switch whose ice block slides. */
.seg-track { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--line-strong); border-radius: 3px; }
.seg-track::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 2px;
  background: var(--ice); transition: transform 420ms var(--ease);
}
.seg-track:has(#v-suv:checked)::before { transform: translateX(100%); }
.seg-track label {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 50px; cursor: pointer;
  font-weight: 600; color: var(--mute); transition: color 260ms var(--ease);
}
.seg-track label:hover { color: var(--bone); }
.seg-track input:checked + label { color: var(--ink); }
.picker input:focus-visible + label { outline: 2px solid var(--ice); outline-offset: 3px; }

/* Readout: the job's photograph with the price laid over it. */
.readout { position: relative; overflow: hidden; aspect-ratio: 5 / 6; background: var(--graphite); border-radius: 3px; }
.readout-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--ease); }
.readout-photos img[data-pkg='detail'] { opacity: 1; }
.readout-photos img[data-pkg='ceramic'] { object-position: 58% 50%; }
.picker:has(input[name='pkg']:checked) .readout-photos img { opacity: 0; }
.picker:has(#p-wash:checked) .readout-photos [data-pkg='wash'],
.picker:has(#p-detail:checked) .readout-photos [data-pkg='detail'],
.picker:has(#p-ceramic:checked) .readout-photos [data-pkg='ceramic'] { opacity: 1; }
.readout::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 11, 13, 0.92) 0%, rgba(10, 11, 13, 0.35) 42%, rgba(10, 11, 13, 0) 62%); }
.readout-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 22px 24px; }
.readout-name { font: 700 0.74rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.2em; color: var(--ice); }
.readout-total { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; font: 700 clamp(3.4rem, 17vw, 6.6rem)/0.9 var(--display); letter-spacing: -0.03em; }
.readout-from { font-size: 0.24em; letter-spacing: 0.1em; color: var(--mute); }
.readout-meta { margin-top: 12px; color: #d6d3cd; }
html:not(.js) .readout-text { display: none; }

/* Packages: one row each; the chosen row opens to show what is in it. */
.pkg { position: relative; border-top: 1px solid var(--line); }
.pkg:last-child { border-bottom: 1px solid var(--line); }
.pkg label { display: block; padding: 18px 0 16px 42px; cursor: pointer; }
.pkg label::before {
  content: ''; position: absolute; left: 0; top: 20px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); transition: background-color 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.pkg label:hover::before { border-color: var(--bone); }
.pkg input:checked + label::before { border-color: var(--ice); background: radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.9) 0 2.4px, transparent 3.2px), var(--ice); }
.pkg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pkg-name { font: 700 0.98rem/1.25 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.pkg-time { flex: none; font-size: 0.86rem; color: var(--mute); }
.pkg-prices { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: 0.9rem; color: var(--mute); }
.pkg-prices b { margin-left: 4px; font: 700 0.98rem/1 var(--display); text-transform: uppercase; color: var(--mute); transition: color 260ms var(--ease); }
.picker:has(#v-sedan:checked) [data-price$='-sedan'],
.picker:has(#v-suv:checked) [data-price$='-suv'] { color: var(--bone); }
.pkg-list { display: none; padding: 0 0 20px 42px; columns: 1; }
.pkg input:checked ~ .pkg-list { display: block; }
.pkg-list li { position: relative; padding: 2px 0 2px 18px; font-size: 0.97rem; line-height: 1.45; color: #d6d3cd; break-inside: avoid; }
.pkg-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ice); }

/* Add-ons: toggles that light up. */
.addon-row { display: flex; flex-wrap: wrap; gap: 10px; }
.addon-row label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 3px; font-size: 0.95rem;
  transition: border-color 220ms var(--ease), background-color 220ms var(--ease), color 220ms var(--ease);
}
.addon-row label:hover { border-color: var(--bone); }
.addon-row b { font-weight: 600; color: var(--mute); transition: color 220ms var(--ease); }
.addon-row input:checked + label { border-color: var(--ice); background: var(--ice-dim); }
.addon-row input:checked + label b { color: var(--ice); }

@media (min-width: 640px) {
  .pkg-list { columns: 2; column-gap: 28px; }
}
@media (min-width: 960px) {
  .prices { padding: 128px var(--gut) 136px; }
  .prices .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 56px; align-items: end; }
  .prices .head .kicker { grid-column: 1 / -1; }
  .prices .head .head-note { margin: 0; }
  .picker {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; row-gap: 32px; margin-top: 56px;
    grid-template-areas: 'seg read' 'pkgs read' 'add read' 'cta read';
    grid-template-rows: auto auto auto 1fr;
  }
  .picker-cta { align-self: start; }
  .readout { position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; aspect-ratio: 5 / 6; }
}