/* Native CSS approximation of frosted glass and a polished metal rim.
   Merchant presentation only; shared catalog identities and actions stay intact. */
@font-face {
  font-family: Geist;
  src: url('/assets/tredfi/geist.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) {
  --glass-surface: rgb(255 255 255 / 76%);
  --glass-rim: rgb(255 255 255 / 94%);
  --glass-line: rgb(141 164 192 / 24%);
  --glass-shadow: 0 12px 32px -20px rgb(10 37 64 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 95%);
}

body.smartlink-glass-demo {
  background: linear-gradient(120deg, #edf3fc 0%, #f7f9fc 40%, #eff3f8 100%);
}

.smartlink-glass-demo .brand-header {
  position: sticky;
  top: 16px;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 76px;
  height: auto;
  max-width: 1248px;
  width: calc(100% - 64px);
  margin: 18px auto 0;
  padding: 8px 16px 8px 28px;
  gap: 24px;
  border: 1px solid var(--glass-rim);
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 0 0 1px rgb(106 126 152 / 16%),
    0 12px 32px -18px rgb(10 37 64 / 32%),
    inset 0 2px 2px #fff, inset 0 -2px 2px rgb(126 150 181 / 10%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
.smartlink-glass-demo .brand-logo { justify-self: start; }
.smartlink-glass-demo .brand-logo img { width: 152px; }
.smartlink-glass-demo .brand-header nav { grid-column: 2; grid-row: 1; gap: 6px; font-size: 13px; }
.smartlink-glass-demo .brand-header nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  transition: background .2s ease;
}
.smartlink-glass-demo .brand-header nav a:hover { background: rgb(225 233 246 / 65%); }
.smartlink-glass-demo .cart-button {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  border: 1px solid rgb(10 37 64 / 8%);
  border-radius: 999px;
  background: linear-gradient(#fff, #eaf0f8);
  box-shadow: inset 0 1px 1px #fff, 0 3px 8px -6px #0a254080;
  padding: 10px 14px;
  min-height: 48px;
}
.smartlink-glass-demo .cart-button .cart-label {
  display: inline;
  background: none;
  color: inherit;
  min-width: 0;
  height: auto;
  font-size: inherit;
  border-radius: 0;
}
.smartlink-glass-demo .cart-button [data-cart-count] { border-radius: 50%; }
.smartlink-glass-demo .navigation-toggle {
  grid-column: 3;
  grid-row: 1;
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: rgb(255 255 255 / 75%);
  color: var(--navy);
}

.smartlink-glass-demo .vehicle-hero { padding-top: 56px; padding-bottom: 40px; }
.smartlink-glass-demo .hero-vehicle,
.smartlink-glass-demo .start-vehicle-stage { border-radius: 32px; }
.smartlink-glass-demo .journey-bar {
  border: 1px solid var(--glass-rim);
  border-radius: 28px;
  padding: 22px 24px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow);
}
.smartlink-glass-demo .vehicle-picker,
.smartlink-glass-demo .build-panel,
.smartlink-glass-demo .payment-preview,
.smartlink-glass-demo .financing-section {
  background: var(--glass-surface);
  border: 1px solid var(--glass-rim);
  border-radius: 28px;
  box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.smartlink-glass-demo .build-panel { top: 112px; }
.smartlink-glass-demo .build-line img { width: 64px; height: 70px; mix-blend-mode: multiply; }
.smartlink-glass-demo .build-panel .primary-button,
.smartlink-glass-demo .build-panel .secondary-button { font-size: 13px; }
.smartlink-glass-demo .vehicle-summary {
  background: var(--glass-surface);
  border: 1px solid var(--glass-rim);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--glass-shadow);
}
.smartlink-glass-demo .vehicle-summary p { font-size: 13px; }
.smartlink-glass-demo .vehicle-summary button,
.smartlink-glass-demo .catalog-more,
.smartlink-glass-demo .catalog-all,
.smartlink-glass-demo .picker-selections button { border-radius: 999px; min-height: 44px; }
.smartlink-glass-demo .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.smartlink-glass-demo .catalog-section > h2 { font-size: 30px; letter-spacing: -1px; }
.smartlink-glass-demo .catalog-section > p { margin-bottom: 24px; }
.smartlink-glass-demo .catalog-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-rim);
  border-radius: 30px;
  background: var(--glass-surface);
  box-shadow: var(--glass-shadow), 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: box-shadow .22s ease, border-color .22s ease;
}
.smartlink-glass-demo .catalog-card > img {
  width: 100%;
  height: 300px;
  aspect-ratio: auto;
  padding: 16px 20px 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 30px 30px 0 0;
}
.smartlink-glass-demo .catalog-card-body { padding: 20px 24px 24px; gap: 10px; }
.smartlink-glass-demo .catalog-card h3 { font: 600 20px/1.25 Geist, Arial, sans-serif; letter-spacing: -.5px; }
.smartlink-glass-demo .catalog-card p { color: #59677a; font-size: 13px; line-height: 1.55; }
.smartlink-glass-demo .catalog-set-price { font-size: 19px; letter-spacing: -.4px; margin-top: 4px; }
.smartlink-glass-demo .catalog-card .catalog-preview {
  min-height: 50px;
  margin-top: auto;
  border: 1px solid rgb(15 79 197 / 50%);
  border-radius: 999px;
  background: linear-gradient(#2675ff, #1459dc);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 35%), 0 5px 12px -8px #1459dc;
  color: #fff;
  font: 600 13px/1.4 Geist, Arial, sans-serif;
  padding: 12px 16px;
}
.smartlink-glass-demo .catalog-rebate { border-radius: 12px; font-size: 12px; }
.smartlink-glass-demo .catalog-rebate-terms { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }

/* The same payment component is presented consistently in cards, builds and previews. */
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px;
  padding: 18px 14px 14px;
  margin: 10px 0 8px;
  border: 1px solid rgb(255 255 255 / 95%);
  border-radius: 22px;
  background: linear-gradient(145deg, rgb(255 255 255 / 90%), rgb(237 243 251 / 65%));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(141 164 192 / 18%);
  font-family: Geist, Arial, sans-serif;
}
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  gap: 4px;
  margin: 0;
}
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult-brand img {
  width: 176px;
  height: 44px;
  max-width: 100%;
  object-fit: contain;
}
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult-brand span {
  font-size: 11px;
  line-height: 1.4;
  color: #59677a;
}
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: #0a2540;
  font: 600 12px/1.4 Geist, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  filter: none;
  white-space: normal;
}
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult .smartlink-katapult-estimate {
  color: #1454cb;
  font-size: 14px;
}
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult .smartlink-katapult-apply {
  background: rgb(255 255 255 / 88%);
  border-color: rgb(141 164 192 / 24%);
  box-shadow: 0 2px 5px -3px rgb(10 37 64 / 20%);
}
:is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult small {
  grid-column: 1 / -1;
  color: #59677a;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}
.smartlink-glass-demo .payment-heading { flex-direction: column; justify-content: center; gap: 12px; }
.smartlink-glass-demo .payment-heading > img,
.smartlink-glass-demo .provider-summary > img,
.smartlink-glass-demo .simulation-approval > img { width: 184px; height: 46px; object-fit: contain; margin-inline: auto; }
.smartlink-glass-demo .provider-summary { text-align: center; }
.smartlink-glass-demo [data-example-payment] .smartlink-katapult-brand,
.smartlink-glass-demo [data-flow-payment] .smartlink-katapult-brand { display: none; }
.smartlink-glass-demo .primary-button,
.smartlink-glass-demo .secondary-button { border-radius: 999px; }
.smartlink-glass-demo .commerce-dialog {
  border: 1px solid var(--glass-rim);
  border-radius: 30px;
  background: #f9fbfe;
  box-shadow: 0 30px 100px rgb(10 37 64 / 28%), inset 0 1px 0 #fff;
}
.smartlink-glass-demo .commerce-dialog::backdrop { background: rgb(10 37 64 / 48%); backdrop-filter: blur(12px); }
.smartlink-glass-demo .dialog-header { background: rgb(255 255 255 / 70%); }
.smartlink-glass-demo .icon-button { border-radius: 50%; }
.smartlink-glass-demo .order-summary { background: #edf3fb; }
.smartlink-glass-demo .review-payment,
.smartlink-glass-demo .completion-summary,
.smartlink-glass-demo .demo-customer { border-radius: 20px; background: #fff; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .smartlink-glass-demo .catalog-card:hover {
    border-color: #fff;
    box-shadow: 0 18px 40px -20px rgb(10 37 64 / 32%),
      inset 0 1px 0 #fff, 0 0 0 1px rgb(31 111 255 / 30%);
  }
  .smartlink-glass-demo .catalog-card .catalog-preview:hover { filter: brightness(.96); }
  :is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult button:hover { background: #e8effa; }
}
@media (max-width: 1100px) {
  .smartlink-glass-demo .shopping-workspace { grid-template-columns: minmax(0, 1fr); }
  .smartlink-glass-demo .build-panel { position: static; width: 100%; }
  .smartlink-glass-demo .catalog-grid { gap: 18px; }
  .smartlink-glass-demo .catalog-card > img { height: 250px; padding: 12px 8px 0; }
  .smartlink-glass-demo .catalog-card-body { padding: 18px; }
  .smartlink-glass-demo .catalog-card h3 { font-size: 18px; }
  .smartlink-glass-demo .catalog-set-price { font-size: 17px; }
}
@media (max-width: 900px) {
  .smartlink-glass-demo .brand-header {
    grid-template-columns: 1fr auto auto;
    width: calc(100% - 32px);
    padding: 8px 12px 8px 20px;
    min-height: 68px;
    gap: 10px;
  }
  .smartlink-glass-demo .brand-header nav {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    font-size: 14px;
    border-top: 1px solid var(--glass-line);
    padding: 10px 0 6px;
  }
  .smartlink-glass-demo .brand-header[data-navigation-open="true"] { border-radius: 30px; }
  .smartlink-glass-demo .brand-header nav a { justify-content: flex-start; padding: 12px 16px; }
  .smartlink-glass-demo .brand-logo img { width: 130px; }
  .smartlink-glass-demo .cart-button { grid-column: 2; }
  .smartlink-glass-demo .shopping-workspace { grid-template-columns: 1fr; }
  .smartlink-glass-demo .build-panel { position: static; width: 100%; }
  .smartlink-glass-demo .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smartlink-glass-demo .catalog-card > img { height: 290px; }
}
@media (max-width: 600px) {
  html:has(body.smartlink-glass-demo) { scroll-padding-top: 96px; }
  .smartlink-glass-demo main { padding: 0 16px; }
  .smartlink-glass-demo .brand-header { top: 10px; margin-top: 12px; padding-left: 16px; gap: 8px; }
  .smartlink-glass-demo .brand-logo img { width: 112px; }
  .smartlink-glass-demo .cart-button { gap: 7px; padding: 8px 10px; min-height: 44px; }
  .smartlink-glass-demo .cart-button .cart-label { display: none; }
  .smartlink-glass-demo .cart-button .ph { font-size: 20px; }
  .smartlink-glass-demo .vehicle-hero { padding-top: 34px; padding-bottom: 28px; }
  .smartlink-glass-demo .journey-bar { padding: 20px 16px; gap: 20px 12px; border-radius: 24px; }
  .smartlink-glass-demo .vehicle-summary { padding: 22px; border-radius: 24px; }
  .smartlink-glass-demo .vehicle-summary h2 { font-size: 24px; }
  .smartlink-glass-demo .vehicle-picker { padding: 22px; }
  .smartlink-glass-demo .picker-controls { flex-direction: column; align-items: stretch; }
  .smartlink-glass-demo .picker-controls input { width: 100%; }
  .smartlink-glass-demo .catalog-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .smartlink-glass-demo .catalog-card > img { height: 300px; padding: 18px 16px 0; }
  .smartlink-glass-demo .catalog-card-body { padding: 20px 22px 22px; }
  .smartlink-glass-demo .catalog-card h3 { font-size: 21px; }
  .smartlink-glass-demo .catalog-card p { font-size: 13px; }
  .smartlink-glass-demo .catalog-set-price { font-size: 19px; }
  .smartlink-glass-demo .catalog-section > h2 { font-size: 29px; }
  .smartlink-glass-demo .financing-section { padding: 28px 22px; border-radius: 26px; }
  .smartlink-glass-demo .payment-preview { padding: 24px 20px; }
  .smartlink-glass-demo .commerce-dialog { border-radius: 24px; }
}
@media (max-width: 360px) {
  .smartlink-glass-demo .catalog-card > img { height: 260px; }
  .smartlink-glass-demo .catalog-card-body { padding: 18px; }
  .smartlink-glass-demo .catalog-card .smartlink-katapult { grid-template-columns: 1fr; }
  .smartlink-glass-demo .dialog-header { gap: 8px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.smartlink-glass-demo) { scroll-behavior: auto; }
  .smartlink-glass-demo *, .smartlink-glass-demo *::before, .smartlink-glass-demo *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .smartlink-glass-demo { --glass-surface: #f8fafd; }
  .smartlink-glass-demo .brand-header,
  :is(.smartlink-glass-demo, .configurator-page[data-presentation="glass"]) .smartlink-katapult { background: #f8fafd; }
  .smartlink-glass-demo * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .smartlink-glass-demo { --glass-surface: #f8fafd; }
  .smartlink-glass-demo .brand-header { background: #f8fafd; }
}

/* Let the Katapult board fill its clipped glass surface without dark corners. */
.configurator-page[data-presentation="glass"] .wheel-configurator .configurator-financing-button {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgb(237 83 112 / 12%), 0 12px 28px -20px rgb(237 83 112 / 35%);
}
.configurator-page[data-presentation="glass"] .wheel-configurator .configurator-financing-button:hover {
  box-shadow: 0 0 0 2px rgb(237 83 112 / 30%), 0 14px 30px -18px rgb(237 83 112 / 40%);
}

.build-tools { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:10px; }
.build-tools .text-button { font-size:12px; white-space:normal; }
.smartlink-glass-demo .featured-builds { margin-top:18px; padding:12px 16px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.featured-builds summary,.presentation-insights summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; }
.featured-builds p { font-size:12px; }
.featured-build-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0; }
.featured-build-options button { min-width:0; padding:14px 10px; border:1px solid #cbd8ed; border-radius:16px; background:#f1f6ff; color:var(--navy); font-size:13px; font-weight:600; }
.featured-build-options small { display:block; font-size:10px; font-weight:400; margin-top:5px; }
.featured-build-options button:hover { border-color:var(--blue); background:#e6efff; }
.quote-dialog { max-width:620px; }
.quote-body { padding:24px; }
.quote-body form { display:grid; gap:16px; margin:20px 0; }
.quote-body label { display:grid; gap:6px; color:var(--navy); font-size:13px; }
.quote-body input,.quote-body textarea { width:100%; min-height:44px; padding:12px; border:1px solid #b8c4d2; border-radius:12px; font:inherit; color:var(--navy); background:white; }
.presentation-insights { max-width:1344px; margin:20px auto 40px; padding:20px; border:1px solid var(--line); border-radius:24px; }
.presentation-insights p { font-size:12px; margin:8px 0; }
@media(max-width:767px){
  .smartlink-glass-demo .catalog-card-body { padding:14px 18px 18px; gap:6px; }
  .smartlink-glass-demo .catalog-card > img { height:260px; padding-top:10px; }
  .smartlink-glass-demo .catalog-card .smartlink-katapult { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:4px; padding:10px; margin:6px 0; }
  .smartlink-glass-demo .catalog-card .smartlink-katapult-brand img { width:160px; height:36px; }
  .smartlink-glass-demo .catalog-card .smartlink-katapult-brand { gap:0; }
  .smartlink-glass-demo .catalog-card .smartlink-katapult-brand span { display:none; }
  .smartlink-glass-demo .catalog-card .smartlink-katapult-estimate { font-size:12px; }
  .smartlink-glass-demo .catalog-card .smartlink-katapult small { font-size:10px; line-height:1.4; }
  .featured-build-options { grid-template-columns:1fr; }
  .presentation-insights { margin-inline:16px; }
}