@import url('/builder-experience.css?v=1');

.topbar{height:58px;display:flex;align-items:center;background:#050505}
.topbar>.shell,.topbar .shell{display:flex;align-items:center;justify-content:space-between}
.topbar img{display:block;object-fit:contain}
.top-actions{display:flex;align-items:center;gap:4px}
.icon{display:flex;align-items:center;justify-content:center}

/* Prevent iOS/Safari autofill from turning service form fields yellow */
.smart-form input:-webkit-autofill,
.smart-form input:-webkit-autofill:hover,
.smart-form input:-webkit-autofill:focus,
.smart-form textarea:-webkit-autofill,
.smart-form select:-webkit-autofill{
  -webkit-text-fill-color:#fff!important;
  caret-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px #09090b inset!important;
  box-shadow:0 0 0 1000px #09090b inset!important;
  border-color:#29292f!important;
  transition:background-color 9999s ease-out 0s!important;
}

/* RealTruck-inspired builder treatment, scoped to Automotive Solutions build page */
body:has(.builder) .builder{grid-template-columns:minmax(0,1fr) 390px!important;gap:18px!important}
body:has(.builder) .summary{background:radial-gradient(circle at 50% 26%,#171719 0,#0b0b0d 42%,#080809 100%)!important;border-radius:18px!important;box-shadow:0 22px 60px rgba(0,0,0,.35);overflow:hidden!important}
body:has(.builder) .summary:before{content:'';display:block;height:210px;border-bottom:1px solid #202024;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 260'%3E%3Cpath fill='%231a1a1d' stroke='%233b3b40' stroke-width='2' d='M90 157 L112 105 Q120 86 151 82 L354 82 L403 116 L594 116 Q626 116 651 140 L688 157 L687 191 L643 191 Q634 151 591 151 Q548 151 538 191 L229 191 Q221 151 178 151 Q135 151 125 191 L79 191 L73 174 Q77 163 90 157Z'/%3E%3Cpath fill='%2309090a' stroke='%23303036' stroke-width='1.5' d='M161 94 L343 94 L381 116 L143 116 Z'/%3E%3Cpath fill='%2309090a' stroke='%23303036' stroke-width='1.5' d='M404 126 L576 126 Q604 126 620 143 L638 156 L404 156 Z'/%3E%3Ccircle fill='%2309090a' stroke='%235a5a60' stroke-width='5' cx='178' cy='190' r='39'/%3E%3Ccircle fill='%23222228' stroke='%23777' stroke-width='2' cx='178' cy='190' r='16'/%3E%3Ccircle fill='%2309090a' stroke='%235a5a60' stroke-width='5' cx='590' cy='190' r='39'/%3E%3Ccircle fill='%23222228' stroke='%23777' stroke-width='2' cx='590' cy='190' r='16'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:88% auto;transition:background-size .25s ease,background-position .25s ease,filter .25s ease,transform .25s ease}
body:has(.builder) .summary-top{padding:16px 18px 14px!important}
body:has(.builder) .summary-top .mini:after{content:' · LIVE CONFIGURATOR';color:#777}
body:has(.builder) .summary-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px!important}
body:has(.builder) .sum-row{border:1px solid #202024!important;border-radius:10px;padding:11px!important;background:rgba(8,8,9,.72)}
body:has(.builder) .summary-total{margin:0 12px 12px;border:1px solid #27272c!important;border-radius:10px;background:#0e0e10}
body:has(.builder) .summary-note{padding:0 14px 16px!important}
body:has(.builder) .choice{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
body:has(.builder) .choice.selected{box-shadow:0 0 0 1px rgba(242,2,16,.25),0 16px 35px rgba(0,0,0,.28)!important}
body:has(.builder) .panel-head{padding-bottom:12px;border-bottom:1px solid #1c1c1f}
body:has(.builder) .category-filters,body:has(.builder) .subfilters{position:sticky;top:58px;z-index:12;background:rgba(5,5,5,.94);backdrop-filter:blur(10px);padding-top:10px!important;padding-bottom:10px!important;margin-bottom:12px}

/* Live F-150 prototype visual */
body:has(.builder):has(#model option[value="F-150"]:checked) .summary:before{height:245px;background-image:linear-gradient(to bottom,rgba(4,4,5,.08),rgba(4,4,5,.2)),url('https://res.cloudinary.com/g38ldwuf/image/upload/v1789084044/automotive-solutions/builder/f150-builder-black.webp');background-size:100% auto;background-position:center 55%;filter:saturate(.95) contrast(1.04)}
body:has(.builder):has(#model option[value="F-150"]:checked):has(#liftChoices .choice:nth-child(2).selected) .summary:before{background-position:center 52%}
body:has(.builder):has(#model option[value="F-150"]:checked):has(#liftChoices .choice:nth-child(3).selected) .summary:before{background-position:center 49%;background-size:101% auto}
body:has(.builder):has(#model option[value="F-150"]:checked):has(#liftChoices .choice:nth-child(4).selected) .summary:before{background-position:center 45%;background-size:102% auto}
body:has(.builder):has(#model option[value="F-150"]:checked):has(#liftChoices .choice:nth-child(5).selected) .summary:before{background-position:center 41%;background-size:103% auto}
body:has(.builder):has(#model option[value="F-150"]:checked):has(#liftChoices .choice:nth-child(6).selected) .summary:before{background-position:center 37%;background-size:104% auto}
body:has(.builder):has(#model option[value="F-150"]:checked):has(#wheelChoices .choice.selected) .summary:before{filter:saturate(1.02) contrast(1.06)}
body:has(.builder):has(#model option[value="F-150"]:checked):has(#tireChoices .choice:nth-child(n+4).selected) .summary:before{background-size:105% auto}

/* Wheel + tire package build screen */
body:has(#packageLoader) .package-loader:after{display:none!important;content:none!important;border:0!important}
body:has(#packageLoader) .loader-kicker,body:has(#packageLoader) .loader-sub{display:none!important}
body:has(#packageLoader) .loader-inner{width:min(330px,82%)!important}
body:has(#packageLoader) .loader-wheel{width:108px!important;height:108px!important;margin:0 auto 34px!important;border:7px solid #29292d!important;border-top-color:#f20210!important;border-right-color:#8d0a12!important;background:radial-gradient(circle at 50% 50%,#09090b 0 17%,#77777d 18% 20%,#17171a 21% 34%,#3c3c41 35% 37%,#101012 38% 54%,#202024 55% 63%,#09090b 64% 100%)!important;box-shadow:inset 0 0 0 1px #4a4a50,0 16px 32px rgba(0,0,0,.55)!important;animation-duration:2.1s!important}
body:has(#packageLoader) .loader-wheel:before{content:'';position:absolute;inset:17px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#55555b 0 3deg,transparent 3deg 45deg);opacity:.85}
body:has(#packageLoader) .loader-wheel:after{content:''!important;position:absolute!important;inset:36px!important;border:2px solid #696970!important;border-radius:50%!important;background:#111114!important;box-shadow:0 0 0 5px #252529!important}
body:has(#packageLoader) .loader-step{margin-bottom:24px!important}
body:has(#packageLoader) .package-loader.is-done{transition-delay:10s!important}
body:has(#packageLoader) .package-loader.is-done .loader-step{visibility:hidden!important}
body:has(#packageLoader) .package-loader.is-done .loader-wheel{animation:spin 2.1s linear infinite!important}
@media(max-width:800px){
  .topbar{height:52px!important}
  .topbar>.shell,.topbar .shell{height:52px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
  .topbar img{width:76px!important;max-height:44px!important;object-fit:contain!important;display:block!important;transform:none!important}
  .top-actions{height:52px!important;display:flex!important;align-items:center!important;gap:4px!important;transform:none!important}
  .top-actions .icon{width:42px!important;height:42px!important;min-width:42px!important;padding:0!important}
  .top-actions .icon svg{width:21px!important;height:21px!important}
  body:has(.builder) .builder{grid-template-columns:1fr!important}
  body:has(.builder) .summary{grid-row:1!important;position:relative!important;top:auto!important;margin-bottom:16px!important}
  body:has(.builder) .stage{grid-row:2!important}
  body:has(.builder) .summary:before{height:160px;background-size:94% auto}
  body:has(.builder):has(#model option[value="F-150"]:checked) .summary:before{height:205px;background-size:104% auto}
  body:has(.builder):has(#model option[value="F-150"]:checked):has(#liftChoices .choice:nth-child(5).selected) .summary:before{background-size:107% auto}
  body:has(.builder) .summary-list{grid-template-columns:1fr 1fr!important}
  body:has(.builder) .category-filters,body:has(.builder) .subfilters{top:52px}
  body:has(#packageLoader) .loader-wheel{width:92px!important;height:92px!important;margin-bottom:30px!important}
  body:has(#packageLoader) .loader-wheel:after{inset:30px!important}
  input,select,textarea{font-size:16px!important}
}

/* Keep editable iPhone fields large enough to avoid Safari focus zoom. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 850px) {
    html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
    html body textarea, html body select {
      font-size: 16px !important;
    }
  }
}