/* Talking to John: callback and alert dialogs, quick questions, trade-in fields, VIN tools, search suggestions.
   Loads after site.css. Uses the system tokens only. */

/* Any [data-callback] button. Add .utd-btn-outline or .home-button for the standard sizes; bare ones get this. */
.utd-home [data-callback]:not(.home-button,.utd-btn-outline,.utd-link){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-sm);padding:0 var(--sp-4);background:transparent;border:1.5px solid var(--utd-action);border-radius:var(--r-control);color:var(--utd-action);font-family:var(--utd-body);font-size:var(--t-small);font-weight:600;line-height:1.2;cursor:pointer}
.utd-home .on-dark [data-callback]:not(.home-button,.utd-btn-outline,.utd-link),.utd-home .utd-footer [data-callback]:not(.home-button,.utd-btn-outline,.utd-link){border-color:rgba(169,204,236,.6);color:#fff}
.utd-home [data-callback]:focus-visible{outline:3px solid #fff;outline-offset:0;box-shadow:0 0 0 6px var(--utd-action)}
/* Without JavaScript the button does nothing, and the phone number beside it is the way to reach John. */
@media(scripting:none){[data-callback],[data-alert]{display:none!important}}

/* Dialogs */
.utd-dialog{width:min(600px,calc(100vw - 2*var(--sp-4)));max-width:none;max-height:calc(100dvh - 2*var(--sp-4));margin:auto;padding:0;background:#fff;border:0;border-radius:var(--r-card);box-shadow:var(--shadow-card);color:var(--utd-ink);overflow-y:auto;overscroll-behavior:contain}
.utd-dialog::backdrop{background:rgba(12,35,64,.66)}
html:has(.utd-dialog[open]){overflow:hidden}
.utd-dialog__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--card-pad);background:#fff;border-bottom:1px solid var(--utd-line)}
.utd-home .utd-dialog h2{font-size:var(--t-h3);font-weight:600;line-height:var(--lh-h3);letter-spacing:var(--track-h3);color:var(--utd-ink)}
.utd-dialog__close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:calc(-1*var(--sp-2));padding:0;background:none;border:0;border-radius:var(--r-control);color:var(--utd-ink);cursor:pointer}
.utd-dialog__close:hover{background:#EAF1F8}
.utd-dialog__close:focus-visible{outline:3px solid var(--utd-action);outline-offset:0}
.utd-dialog__close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.utd-dialog__form.home-form{padding:var(--card-pad);background:#fff;border:0;border-radius:0}
.utd-dialog__form.home-form.is-success{padding-block:var(--sp-6)}
.utd-home .utd-dialog__lede{margin:0 0 var(--sp-4);font-size:var(--t-small);line-height:var(--lh-small);color:var(--utd-body-ink);text-wrap:pretty}
.utd-home .utd-dialog__truck{margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--utd-paper);border-radius:var(--r-control);font-size:var(--t-small);font-weight:500;line-height:var(--lh-small);color:var(--utd-ink);overflow-wrap:anywhere}
.utd-dialog__form.is-success .utd-dialog__lede,.utd-dialog__form.is-success .utd-dialog__truck,.utd-dialog__form.is-success .home-form__privacy{display:none}
.utd-home .utd-form--light .home-form__status[data-tone=info]{color:var(--utd-ink)}

/* Quick questions */
.utd-quick__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.utd-home .utd-quick__label{margin:0 0 var(--sp-2);font-size:var(--t-small);font-weight:500;line-height:var(--lh-small);color:var(--utd-ink)}
.utd-home .utd-quick .utd-chip{padding-block:var(--sp-2);line-height:1.3;text-align:left}

/* Trade-in details */
.utd-trade[hidden]{display:none}
.utd-trade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--field-gap)}
.utd-trade__note{grid-column:1/-1}
.utd-home .utd-trade__lede{grid-column:1/-1;margin:0;font-size:var(--t-small);line-height:var(--lh-small);color:#DCE7F1}
.utd-home .utd-form--light .utd-trade__lede{color:var(--utd-body-ink)}

/* Truck page: the panel trigger and VIN tools */
.utd-home main .inv-panel__callback{width:100%;margin-top:var(--stack)}
.utd-vin{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--utd-line)}
.utd-home .utd-vin p{flex:1 1 100%;margin:0;font-size:var(--t-small);line-height:var(--lh-small)}
@media print{.utd-vin,.inv-panel__callback,.utd-dialog{display:none!important}}

/* Alert offer */
.utd-alert-band{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);margin-top:var(--sp-6)}
.utd-home main .utd-alert-band h2{font-size:var(--t-h3);font-weight:600;line-height:var(--lh-h3);letter-spacing:var(--track-h3)}
.utd-home main .utd-alert-band p{margin-top:var(--sp-2);max-width:40rem;font-size:var(--t-small);line-height:var(--lh-small)}
.utd-alert-band>button{flex:none}
.utd-alert-section{padding-block:var(--section-sm)}
.utd-alert-section .utd-alert-band{margin-top:0}
/* The alert button makes the toolbar wider than a tablet's results column. */
.inv-toolbar{flex-wrap:wrap}
.inv-toolbar__alert{flex:none}
.inv-after-results{display:none}

/* Search suggestions */
.utd-suggest{position:relative}
.utd-suggest__list{position:absolute;left:0;right:0;top:calc(100% + var(--sp-1));z-index:80;max-height:min(55vh,400px);padding:var(--sp-2);background:#fff;border:1px solid var(--utd-line);border-radius:var(--r-control);box-shadow:var(--shadow-card);color:var(--utd-ink);overflow-y:auto;overscroll-behavior:contain}
.utd-suggest__list[hidden]{display:none}
.utd-suggest__group{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--t-min);font-weight:600;line-height:var(--lh-min);color:var(--utd-body-ink)}
.utd-suggest__option{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);min-height:44px;padding:var(--sp-3);border-radius:var(--r-badge);font-size:var(--t-small);font-weight:500;line-height:1.25;cursor:pointer}
.utd-suggest__option small{flex:none;max-width:55%;font-size:var(--t-min);font-weight:400;line-height:1.25;color:var(--utd-body-ink);text-align:right}
.utd-suggest__option:hover,.utd-suggest__option.is-active{background:#EAF1F8}
.utd-suggest__option.is-active{outline:2px solid var(--utd-action);outline-offset:-2px}

@media(max-width:640px){
  .utd-dialog{width:calc(100vw - 2*var(--sp-2));max-height:calc(100dvh - 2*var(--sp-2))}
  .utd-trade{grid-template-columns:minmax(0,1fr)}
  .utd-alert-band{flex-direction:column;align-items:stretch}
  .utd-home main .inv-panel__callback{order:5;margin-top:var(--stack)}
  .utd-home .utd-vin>*{width:100%}
  .utd-home .utd-vin .utd-link{justify-content:center}
  .utd-home main .inv-toolbar__alert{display:none}
  .inv-after-results{display:block;margin-top:var(--grid-gap)}
  .utd-home .inv-after-results .utd-btn-outline{width:100%}
  .utd-suggest__option{flex-direction:column;gap:var(--sp-1)}
  .utd-suggest__option small{max-width:none;text-align:left}
}