/* CQ Phone & Tablet Price Lab. Builds on /dashcam/styles.css (same tokens, buttons, lab, estimate, promo, dock, modal). */

/* ---- hero + device finder ---- */
.cq-phonetab .pt-hero{align-items:start;grid-template-columns:1fr 1.04fr}
.cq-phonetab .pt-hero h1{font-size:clamp(58px,6.6vw,96px)}
/* the same warm panel as the repair cards and the closing banner */
/* The two hero columns end on the same line: the finder card (left) and the price beat card (right) are the last card of their column and stretch to the
   taller column. The check marks line is the footer of the finder card. */
.cq-phonetab .pt-hero{align-items:stretch}
.cq-phonetab .pt-hero .cq-hero-copy{display:flex;flex-direction:column;padding-bottom:0}
.pt-finder{flex:1;display:flex;flex-direction:column}
.pt-finder .pt-browse{margin-bottom:20px}
.pt-finder .cq-hero-proof{margin:auto 0 0;padding-top:18px;border-top:1px solid #3a2c20}
.pt-hero-side .pt-beat{align-content:center}
.pt-finder{position:relative;margin:26px 0 0;padding:26px 28px 22px;border:1px solid #664529;border-radius:8px;background:linear-gradient(110deg,#20180f,#141416 65%)}
.pt-finder-label{display:block!important;margin:0 0 18px!important;font-family:var(--cq-display);font-size:clamp(30px,3.4vw,38px);font-weight:700;line-height:1.05;letter-spacing:-.01em;color:#f4f1eb}
.pt-finder-label:before{content:"STEP 01";display:block;margin-bottom:8px;font:600 10px var(--cq-font);letter-spacing:1.8px;color:var(--cq-orange)}
.pt-finder-label .cq-step-dot{display:none}
.pt-kind{display:inline-flex;padding:3px;border-radius:6px;background:#090b0e;border:1px solid #3a2c20;margin-bottom:14px}
.pt-kind button{min-height:40px;border:0;background:transparent;color:var(--cq-muted);padding:7px 20px;border-radius:4px;font-size:12px;font-weight:600}
.pt-kind button.is-active{color:#1a1006;background:linear-gradient(135deg,#ffb35c,#f07a1f);box-shadow:0 6px 18px #f7792033}
.pt-search{position:relative;display:block}
.pt-search>svg{position:absolute;left:16px;top:19px;width:20px;height:20px;color:var(--cq-orange);pointer-events:none}
.pt-search input#pt-search{width:100%;min-height:58px;padding:14px 18px 14px 48px;background:#0a0b0d;border:1px solid #664529;border-radius:6px;color:var(--cq-text);font-size:17px;-webkit-appearance:none;appearance:none}
.pt-search input#pt-search::placeholder{color:#8a7f73}
.pt-search input#pt-search:focus{border-color:var(--cq-orange);outline:0;box-shadow:0 0 0 3px #f7792026}
.pt-results{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 6px);max-height:330px;overflow:auto;margin:0;padding:6px;list-style:none;background:#17120d;border:1px solid #664529;border-radius:8px;box-shadow:0 22px 50px #000a}
.pt-results li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:5px;cursor:pointer;font-size:14px;min-height:44px}
.pt-results li small{color:#a6a29e;font-size:11px;white-space:nowrap}
.pt-results li[aria-selected=true],.pt-results li:hover{background:#2b1d10;color:#ffd9b6}
.pt-results li.is-none{cursor:default;color:#a6a29e}
.pt-results li.is-none:hover{background:none;color:#a6a29e}
.pt-series button,.pt-models button{min-height:42px;padding:9px 16px;border:1px solid #4a3626;border-radius:6px;background:#1a1410;font-size:13px;font-weight:500;color:#f0e2d2;transition:border-color .2s,background .2s,transform .2s}
.pt-series button:hover,.pt-models button:hover{border-color:#c98440;background:#271a0f;color:#fff;transform:translateY(-1px)}
.pt-series button[aria-pressed=true],.pt-models button[aria-pressed=true]{border-color:transparent;background:linear-gradient(135deg,#ffb35c,#f07a1f);color:#1a1006;font-weight:600}
.pt-browse{margin-top:18px;border-top:1px solid #3a2c20;padding-top:2px}
.pt-browse summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font:600 10px var(--cq-font);letter-spacing:1.8px;text-transform:uppercase;color:var(--cq-orange)}
.pt-browse summary::-webkit-details-marker{display:none}
.pt-browse summary span{font-size:22px;font-weight:400;letter-spacing:0;color:var(--cq-bright);transition:transform .2s}
.pt-browse[open] summary span{transform:rotate(45deg)}
.pt-series{display:flex;flex-wrap:wrap;gap:10px}
.pt-models{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;max-height:240px;overflow:auto;padding-right:4px}

/* the right column of the hero: the lab, and the price beat card under it */
.pt-hero-side{display:grid;grid-template-rows:auto 1fr;gap:18px;align-content:stretch;min-width:0}
.pt-beat{grid-template-columns:auto minmax(0,1fr);gap:18px 22px;padding:24px 26px}
.pt-beat .cq-promo-copy h2{font-size:clamp(26px,2.5vw,34px)}
.pt-beat .cq-promo-copy p:last-child{font-size:13px}
.pt-beat .cq-promo-action{grid-column:1/-1;justify-items:start;text-align:left}

/* ---- the lab ---- */
.pt-lab{--pt-gap:62px;--pt-dx:26px}
.pt-lab[data-mode=assembled]{--pt-gap:9px;--pt-dx:5px}
.pt-map{aspect-ratio:520/430;margin-top:0}
.pt-svg{display:block;width:100%;height:100%;overflow:visible}
.pt-svg rect,.pt-svg path,.pt-svg circle,.pt-svg polygon{vector-effect:non-scaling-stroke}
.pt-svg .pt-layer{transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.pt-svg .pt-slab{transition:filter .25s,stroke .25s}
.pt-svg .pt-thick{fill:#05070a;stroke:#2b323b;stroke-width:1}
.pt-svg .pt-grid{stroke:#fff;stroke-opacity:.045;fill:none}
.pt-svg text{font-family:"DM Sans",Arial,sans-serif}
.pt-svg .pt-print{font-size:6.2px;letter-spacing:2.2px;fill:#8e9aab;font-weight:600}
.pt-svg .pt-hit{fill:transparent;stroke:none;cursor:pointer;pointer-events:all}
.pt-lab[data-has-model=false] .pt-svg .pt-hit{cursor:default}
.pt-svg .pt-hit:focus{outline:none}
.pt-svg .pt-layer:has(.pt-hit:focus-visible) .pt-slab-main{stroke:#fff;stroke-width:1.6}
.pt-svg .pt-layer:hover .pt-slab-main,.pt-svg .pt-layer.is-hot .pt-slab-main{stroke:#ffbd7a}
.pt-svg .pt-layer.is-picked .pt-slab-main{stroke:var(--cq-orange);stroke-width:1.6;filter:drop-shadow(0 0 10px #f7792088)}
.pt-svg .pt-layer.has-photo .pt-thick{display:none}
.pt-svg .pt-photo{pointer-events:none;transition:filter .25s;filter:drop-shadow(0 0 .7px #a9bdd4cc) drop-shadow(0 7px 5px #000c)}
.pt-svg .pt-layer.has-photo .pt-slab-main{stroke:none!important;filter:none!important}
.pt-svg .pt-layer.has-photo:hover .pt-photo,.pt-svg .pt-layer.has-photo.is-hot .pt-photo{filter:drop-shadow(0 0 .7px #a9bdd4cc) drop-shadow(0 7px 5px #000c) drop-shadow(0 0 5px #ffbd7acc)}
.pt-svg .pt-layer.has-photo.is-picked .pt-photo{filter:drop-shadow(0 0 .7px #a9bdd4cc) drop-shadow(0 7px 5px #000c) drop-shadow(0 0 8px #f77920)}
/* the CQ logo on the display: the site logo's own classes carry the running current; strokes keep their logo proportions */
.pt-svg .pt-logo *{vector-effect:none}
.pt-svg .pt-logo text{font-family:Arial,Helvetica,sans-serif}
.pt-svg .pt-logo{filter:drop-shadow(0 0 2.5px #f7792099)}
.pt-svg .pt-logo .cq-logo-trace-c-base,.pt-svg .pt-logo .cq-logo-trace-q-base{stroke-width:3.6}
.pt-svg .pt-logo .cq-logo-trace-c-dot,.pt-svg .pt-logo .cq-logo-trace-q-dot{stroke-width:7.5}
.pt-svg .pt-logo .cq-logo-bolt{stroke-width:7}
.pt-svg .pt-logo .cq-logo-spark{stroke-width:5}
.pt-svg .pt-crack{display:none;stroke:#fff;stroke-opacity:.55;stroke-width:.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pt-svg .pt-layer[data-layer=screen].is-picked .pt-crack{display:block}
.pt-svg .pt-conn{stroke:#6b5a4a;stroke-width:1;stroke-dasharray:3 3;fill:none;transition:opacity .4s}
.pt-svg .pt-conn-dot{fill:var(--cq-orange)}
.pt-lab[data-mode=assembled] .pt-svg .pt-conn,.pt-lab[data-mode=assembled] .pt-svg .pt-conn-dot{opacity:0}
.pt-svg .pt-scan{opacity:0;pointer-events:none}
.pt-lab.is-scanning .pt-svg .pt-scan{animation:pt-scan 1.15s ease-out}
@keyframes pt-scan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(400px)}}
.pt-svg .pt-phone-only{display:inline}
.pt-lab[data-kind=tablet] .pt-svg .pt-phone-only{display:none}

/* Beat the quote: the upload of another shop's quote */
.pt-beat-file{display:grid;gap:8px;margin:18px 0}
.pt-beat-file label{font-size:12px;color:#d9d3cc}
.pt-beat-file input[type=file]{width:100%;padding:10px;border:1px dashed #6c4a2b;background:#1a1410;color:#d7dce2;font-size:13px}
.pt-beat-file input[type=file]::file-selector-button{margin-right:12px;padding:9px 14px;border:0;background:var(--cq-btn-orange);color:#1a0b03;font-weight:700;cursor:pointer}
.pt-beat-file small{font-size:11px;color:#a6a29e}
.pt-beat-previews{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.pt-chip{position:relative;width:84px;height:84px;border:1px solid #4a3626;background:#0d0a07}
.pt-chip img{display:block;width:100%;height:100%;object-fit:cover}
.pt-chip button{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;border:1px solid #777;background:#000;color:#fff;font-size:16px;line-height:1;display:grid;place-items:center}
#pt-beat-form .cq-form-grid{margin-top:0}

/* Book us: the calendar (its day and arrow styles come from /cq-booking-widget.css), the times of the chosen day, the recap of the chosen time */
.pt-cal{max-width:460px;margin:22px auto 0}
.pt-cal .cq-booking-day{aspect-ratio:auto;min-height:44px}
.pt-cal .cq-booking-calendar-head strong{font-size:18px}
.pt-slots{margin:20px 0 4px}
.pt-slots-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.pt-slots-head strong{font-size:15px;color:#fff}
.pt-slot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.pt-slot{min-height:44px;padding:6px 4px;display:grid;place-items:center;gap:1px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#d7dce2;font-size:13px;font-weight:700;line-height:1.1}
.pt-slot small{font-size:9px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#8a6a4f}
.pt-slot:hover:not(:disabled){border-color:rgba(255,146,40,.6);background:rgba(255,120,20,.1);color:#fff}
.pt-slot:disabled{color:#4a4e54;background:rgba(255,255,255,.015);cursor:not-allowed}
.pt-slot[aria-pressed=true]{background:linear-gradient(135deg,#ffbd5a,#f27620);border-color:transparent;color:#1a0b03}
#pt-book-next{max-width:460px;margin:20px auto 0;display:flex}
#pt-book-pick .cq-form-helper{text-align:center}
.pt-slot-recap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 18px;padding:13px 16px;border:1px solid rgba(255,133,40,.35);background:rgba(247,121,32,.08)}
.pt-slot-recap>div{display:grid;gap:3px}
.pt-slot-recap strong{font-size:15px;color:#fff}
.pt-book-where{margin:16px 0 4px}.pt-book-where p{margin:6px 0 0;color:#d7dce2}

/* the other repairs, listed under the device */
.pt-legend{display:flex;flex-wrap:wrap;gap:8px;padding:0 23px 16px}
.pt-leg{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:7px 13px;border:1px solid #4a3626;border-radius:6px;background:#1a1410;color:#f0e2d2;font-size:12px;font-weight:500;transition:border-color .2s,background .2s}
.pt-leg span{color:#a6a29e;font-variant-numeric:tabular-nums}
.pt-leg:hover{border-color:#c98440;background:#271a0f}
.pt-leg.is-picked{border-color:var(--cq-orange);background:#2b1d10}
.pt-leg.is-picked span{color:var(--cq-bright)}

.pt-tags{position:absolute;inset:0;pointer-events:none}
.pt-tag{position:absolute;left:63.5%;width:35%;transform:translateY(-50%);pointer-events:auto;text-align:left;display:flex;flex-direction:column;gap:2px;padding:7px 10px 8px;border:1px solid #333941;border-left:2px solid #5b4330;border-radius:7px;background:#0f1216e6;color:var(--cq-text);transition:border-color .2s,background .2s,top .75s cubic-bezier(.2,.8,.2,1)}
.pt-tag-name{font-size:8px;letter-spacing:1.6px;color:#97a1ad;font-weight:600;line-height:1.3}
.pt-tag-price{font-size:19px;letter-spacing:-.6px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.pt-tag-sub{font-size:9px;color:#9aa4b0;line-height:1.35}
.pt-tag:hover,.pt-tag.is-hot{border-color:#8a5a37;background:#1a140f}
.pt-tag.is-picked{border-color:var(--cq-orange);border-left-color:var(--cq-orange);background:#26190f}
.pt-tag.is-picked .pt-tag-name:after{content:"  ✓ ADDED";color:var(--cq-bright)}
.pt-tag.is-off{opacity:.5}
.pt-lab[data-has-model=false] .pt-tag{cursor:default}
.pt-lab[data-has-model=false] .pt-tag-price{color:#6d7783}

/* ---- the list ---- */
.pt-empty{padding:34px;border:1px dashed #3a4048;border-radius:12px;display:grid;gap:18px;justify-items:start;color:#a9b2bd;font-size:14px}
/* The estimate panel starts on the same line as the first box of the repair list (the part quality box): the device name is the first grid row, over the
   list only, and the list and the panel share the second row. On a phone everything stacks. */
#repairs .cq-config-grid{grid-template-rows:auto auto;row-gap:0}
#repairs .pt-device-head{grid-column:1;grid-row:1}
#repairs .cq-settings{grid-column:1;grid-row:2}
#repairs .cq-estimate{grid-column:2;grid-row:2}
@media(max-width:820px){
  #repairs .pt-device-head,#repairs .cq-settings,#repairs .cq-estimate{grid-column:1;grid-row:auto}
  #repairs .cq-estimate{margin-top:25px}
}
.pt-device-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.pt-device-head h3{font-family:var(--cq-display);font-size:clamp(34px,4vw,48px);margin:6px 0 4px}
.pt-device-head small{display:block;color:#8e9aab;font-size:11px;letter-spacing:.5px}
/* the same warm panel as the closing banner: dark gradient, gold-brown border, orange spaced label, big condensed title and price, orange button */
.pt-grade,#repairs .pt-repair{background:linear-gradient(110deg,#20180f,#141416 65%);border:1px solid #664529;border-radius:8px}
.pt-grade{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:14px;padding:20px 26px}
.pt-grade .cq-overline{color:var(--cq-orange);font-size:10px;letter-spacing:1.8px;font-weight:600}
.pt-grade small{flex-basis:100%;color:#a6a29e;font-size:11px}
.pt-list{display:grid;gap:12px}
#repairs .pt-repair{position:relative;margin:0;color:var(--cq-text);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
#repairs .pt-repair:hover{border-color:#a8703d;transform:translateY(-1px)}
#repairs .pt-repair.is-picked{border-color:var(--cq-orange);box-shadow:0 0 0 1px #f7792055,0 14px 38px #f7792018}
#repairs .pt-repair:has(input:focus-visible){outline:2px solid var(--cq-bright);outline-offset:3px}
.pt-repair-main{display:block;min-width:0}
.pt-repair-eyebrow{display:block;color:var(--cq-orange);font-size:10px;font-weight:600;letter-spacing:1.8px;line-height:1.6;margin-bottom:6px}
.pt-repair-name{display:block;font-family:var(--cq-display);font-size:clamp(28px,3.2vw,36px);font-weight:700;line-height:1.05;letter-spacing:-.01em;color:#f4f1eb}
.pt-repair-blurb{display:block;color:#a6a29e;font-size:12px;line-height:1.6;margin-top:8px;max-width:520px}
.pt-repair-side{display:flex;align-items:center;gap:22px;flex-shrink:0}
.pt-repair-price{font-family:var(--cq-display);font-size:clamp(34px,3.6vw,44px);font-weight:600;letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.pt-repair-price small{display:block;font:600 9px var(--cq-font);letter-spacing:1.4px;color:#8e9aab;margin-top:6px}
.pt-add{min-width:128px;min-height:48px;padding:13px 21px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:linear-gradient(135deg,#ffb35c,#f07a1f);color:#1a1006;font-size:12px;font-weight:600;box-shadow:0 8px 26px #f7792033;transition:filter .2s,box-shadow .2s}
#repairs .pt-repair:hover .pt-add{filter:brightness(1.07)}
.pt-add.is-on{background:#2b1d10;color:var(--cq-bright);border:1px solid var(--cq-orange);box-shadow:none}
.pt-free{margin-top:12px}
#repairs .pt-repair.is-free .pt-repair-price{color:#9fe0b0}
#repairs .pt-repair.is-free .pt-repair-eyebrow{color:#9fe0b0}
.pt-estimate-empty{font-size:11px;color:#8e9aab;padding:8px 0}
.cq-estimate-line.is-saving{color:#9fe0b0}

/* ---- how we price (the same look as the step list of the head unit page, all lit) ---- */
.pt-method{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.pt-method .cq-step{position:relative;padding:22px 4px 0;border-top:2px solid var(--cq-orange)}
.pt-method .cq-step:before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--cq-orange);box-shadow:0 0 0 6px #f7792022}
.pt-method .cq-step-num{display:block;font-family:var(--cq-display);font-size:48px;line-height:1;color:var(--cq-orange);letter-spacing:-1px}
.pt-method .cq-step h3{font-family:var(--cq-display);font-size:26px;margin:10px 0 8px}
.pt-method .cq-step p{font-size:13px;line-height:1.8;color:#a6b0be}
@media(max-width:820px){
  .pt-method{grid-template-columns:1fr;gap:0;border-left:2px solid #2a2d33;margin-left:6px}
  .pt-method .cq-step{border-top:0;padding:0 0 28px 26px}
  .pt-method .cq-step:before{left:-8px;top:6px}
}

/* ---- small screens ---- */
@media(max-width:980px){
  .cq-phonetab .pt-hero{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
  .pt-finder{padding:20px 16px 16px}
  .pt-tag{padding:5px 7px 6px}
  .pt-tag-price{font-size:15px}
  .pt-tag-name{font-size:7px;letter-spacing:1.2px}
  .pt-tag-sub{display:none}
  .pt-tag.is-picked .pt-tag-name:after{content:" ✓"}
  #repairs .pt-repair{flex-direction:column;align-items:stretch;gap:18px;padding:20px 20px}
  .pt-repair-side{justify-content:space-between}
  .pt-repair-price{text-align:left}
  .pt-add{min-width:0;flex:0 0 auto}
  .pt-grade{padding:16px 18px}
  .pt-device-head{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .pt-svg .pt-layer,.pt-tag{transition:none}
  .pt-lab.is-scanning .pt-svg .pt-scan{animation:none}
}