/* ===== CHAIZ-INSPIRED REDESIGN FOR COMPARE BEST WARRANTIES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}
body{background-image:none!important;background-color:#fff!important;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;margin:0!important;padding:0!important;color:#1a1a2e!important}
body>div:first-child{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 48px!important;background:#fff!important;border-bottom:1px solid #e5e7eb!important;position:sticky!important;top:0!important;z-index:1000!important;box-shadow:0 1px 3px rgba(0,0,0,.04)!important}
#headerDiv{background-color:transparent!important;color:#1a1a2e!important;font-size:1em!important;text-align:left!important;padding:0!important;margin:0!important}
#headerDiv span{font-size:1.15em!important;font-weight:800!important;letter-spacing:-.5px!important;line-height:1.2!important}
#headerDiv span br{display:none!important}
header{display:flex!important;align-items:center!important}
nav{display:flex!important;gap:16px!important;align-items:center!important}
.headerNavItem{background-color:transparent!important;min-width:auto!important;padding:8px 24px!important;border:1.5px solid #1a1a2e!important;border-radius:24px!important;transition:all .2s ease!important}
.headerNavItem:hover{background-color:#f0fdf4!important;border-color:#08e57b!important}
.headerNavItem a{text-decoration:none!important;color:#1a1a2e!important}
.headerNavItem h3{font-size:.85em!important;font-weight:600!important;margin:0!important}

/* ====================== PROMO POPUP ====================== */

/* Overlay - glassmorphism backdrop */
.overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  animation: overlayFadeIn 0.3s ease-out !important;
  padding: 20px !important;
}

.overlay[hidden] {
  display: none !important;
}

/* Popup card - white with green accent, flex for ordering */
.popup {
  background: #ffffff !important;
  color: #1a1a2e !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.1) !important;
  max-width: 420px !important;
  width: 90% !important;
  padding: 48px 40px 40px !important;
  text-align: center !important;
  position: relative !important;
  animation: popupSlideIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Top green gradient accent bar */
.popup::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #08e57b 0%, #06cc6d 50%, #04a854 100%) !important;
  display: block !important;
  width: auto !important;
  border-radius: 24px 24px 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  order: -2 !important;
}

/* Celebration emoji at top */
.popup::after {
  content: '\1F389' !important;
  display: block !important;
  font-size: 2.6em !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
  animation: none !important;
  position: static !important;
  background: none !important;
  color: initial !important;
  -webkit-text-fill-color: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  order: -1 !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  max-width: none !important;
  max-height: none !important;
}

/* "2 Years Free!" heading */
.popup h1 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 2.4em !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  color: #08e57b !important;
  letter-spacing: -0.8px !important;
  line-height: 1.1 !important;
  order: 1 !important;
}

/* "Pay for 24 months. Get 48 months!" subheading */
.popup .content {
  order: 2 !important;
}

.popup .content h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1.15em !important;
  color: #4b5563 !important;
  opacity: 1 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Close button - circular, subtle */
.popup .close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  color: #9ca3af !important;
  font-size: 18px !important;
  background: #f3f4f6 !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  padding: 0 0 2px 0 !important;
  z-index: 10 !important;
  order: 99 !important;
}

.popup .close:hover {
  background: #e5e7eb !important;
  color: #374151 !important;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popupSlideIn {
  from { opacity: 0; transform: scale(0.85) translateY(24px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}




/* ====================== FORM & CONTENT STYLES ====================== */

#contentDiv {
  background-color: #fff !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-height: auto !important;
}

#divLeadForm {
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 40%, #fff 100%) !important;
  padding: 48px 24px 56px !important;
}

#divLeadForm > form > div:first-child {
  max-width: 700px;
  margin: 0 auto;
}

#divLeadForm h2 {
  font-size: 2.4em !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  margin: 0 0 6px !important;
  letter-spacing: -1px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

#inputSection {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px 24px !important;
  max-width: 680px !important;
  margin: 36px auto 0 !important;
  padding: 32px !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
  font-size: 1em !important;
}

.inputDiv {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.inputDiv[style*="display: none"] {
  display: none !important;
}

.widerInputDiv {
  grid-column: 1 / -1 !important;
}

.inputLabelDiv {
  text-align: left !important;
  font-size: .82em !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  margin-bottom: 6px !important;
  padding-left: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

.inputCellDiv {
  text-align: left !important;
}

.inputCellDiv > select,
.inputCellDiv > input {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  font-size: .95em !important;
  font-family: 'Inter', sans-serif !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  background-color: #fafafa !important;
  color: #1a1a2e !important;
  transition: all .2s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  margin-bottom: 0 !important;
  min-width: 0 !important;
}

.inputCellDiv > select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

.inputCellDiv > select:focus,
.inputCellDiv > input:focus {
  border-color: #08e57b !important;
  box-shadow: 0 0 0 3px rgba(8,229,123,.12) !important;
  background-color: #fff !important;
}

.submitButtonDiv {
  text-align: center !important;
  margin-top: 28px !important;
  grid-column: 1 / -1 !important;
}

#submitButton {
  background: linear-gradient(135deg, #08e57b 0%, #06d170 100%) !important;
  color: #1a1a2e !important;
  font-size: 1.15em !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px 56px !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  box-shadow: 0 4px 16px rgba(8,229,123,.3) !important;
  min-width: 220px !important;
  letter-spacing: .3px !important;
}

#submitButton:hover {
  background: linear-gradient(135deg, #06d170 0%, #05b862 100%) !important;
  box-shadow: 0 6px 24px rgba(8,229,123,.4) !important;
  transform: translateY(-2px) !important;
}

.submitButtonDiv > div[style] {
  font-size: .72em !important;
  color: #9ca3af !important;
  margin-top: 18px !important;
  line-height: 1.5 !important;
  font-style: normal !important;
}

/* ====================== COVERAGES ====================== */

#coveragesDiv {
  display: grid !important;
  gap: 28px !important;
  padding: 48px 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

#coverageDiv {
  border: 2px solid #e5e7eb !important;
  border-radius: 20px !important;
  max-width: 400px !important;
  padding: 32px 28px !important;
  margin: 0 auto !important;
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.05) !important;
  transition: all .25s ease !important;
}

#coverageDiv:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
  transform: translateY(-3px) !important;
  border-color: #08e57b !important;
}

#grade {
  font-family: 'Inter', sans-serif !important;
  font-size: .85em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #08e57b !important;
  display: inline-block !important;
  background: #f0fdf4 !important;
  padding: 4px 16px !important;
  border-radius: 20px !important;
}

#monthlyCostDiv {
  margin: 20px 0 16px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

#monthlyCostDiv > span {
  font-weight: 800 !important;
  color: #1a1a2e !important;
}

.coverageItem {
  padding: 10px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  font-size: .9em !important;
  color: #6b7280 !important;
}

.coverageItem label {
  font-weight: 600 !important;
  color: #374151 !important;
}

.coverageDetailsDiv {
  margin: 24px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

.coverageDetailsDiv div {
  font-size: .82em !important;
  color: #4b5563 !important;
}

.coverageDetailsDiv input[type="checkbox"] {
  accent-color: #08e57b !important;
  margin-right: 4px !important;
}

#btnPurchase {
  background: linear-gradient(135deg, #08e57b 0%, #06d170 100%) !important;
  color: #1a1a2e !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 36px !important;
  cursor: pointer !important;
  transition: all .25s ease !important;
  box-shadow: 0 4px 16px rgba(8,229,123,.25) !important;
}

#btnPurchase:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(8,229,123,.4) !important;
}

/* ====================== ADDITIONAL INFO ====================== */

.inputSection {
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
}

.inputSection h2,
.inputSectionHeaderDiv h2 {
  font-size: 1.3em !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  letter-spacing: -.3px !important;
}

#additionalInfoForm {
  max-width: 600px !important;
  margin: 0 auto !important;
  gap: 16px !important;
}

#additionalInfoForm .inputDiv {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.addressInput,
#additionalInfoForm input,
#additionalInfoForm select {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-size: .95em !important;
  font-family: 'Inter', sans-serif !important;
  background: #fafafa !important;
  color: #1a1a2e !important;
  outline: none !important;
  transition: all .2s ease !important;
}

.addressInput:focus,
#additionalInfoForm input:focus,
#additionalInfoForm select:focus {
  border-color: #08e57b !important;
  box-shadow: 0 0 0 3px rgba(8,229,123,.12) !important;
  background: #fff !important;
}

/* ====================== UPDATED COVERAGE ====================== */

#udpatedCoverageDiv {
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 60px 24px !important;
  text-align: center !important;
}

#udpatedCoverageDiv h2 {
  font-size: 1.6em !important;
  font-weight: 700 !important;
}

#udpatedCoverageDiv h4 {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 1em !important;
  line-height: 1.5 !important;
}

#btnNewPrice {
  background: linear-gradient(135deg, #08e57b 0%, #06d170 100%) !important;
  color: #1a1a2e !important;
  font-size: 1.1em !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 48px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(8,229,123,.3) !important;
  font-family: 'Inter', sans-serif !important;
  margin-top: 16px !important;
}

/* ====================== QUOTE PURCHASE ====================== */

#addressCheckboxDiv {
  max-width: 600px !important;
  margin: 24px auto !important;
  padding: 16px 24px !important;
  background: #f9fafb !important;
  border-radius: 12px !important;
  text-align: left !important;
}

#addressCheckboxDiv label {
  font-size: .9em !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

#quoteDiv {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 24px 48px !important;
}

#quoteDiv .inputDiv {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 16px !important;
}

#quoteDiv input,
#quoteDiv select {
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-size: .95em !important;
  font-family: 'Inter', sans-serif !important;
  background: #fafafa !important;
  color: #1a1a2e !important;
  outline: none !important;
  transition: all .2s ease !important;
}

#quoteDiv input:focus,
#quoteDiv select:focus {
  border-color: #08e57b !important;
  box-shadow: 0 0 0 3px rgba(8,229,123,.12) !important;
}

#quotePurchaseMonthlyPrice {
  font-size: 1.8em !important;
  font-weight: 800 !important;
  color: #08e57b !important;
  text-align: center !important;
  padding: 12px 0 !important;
}

/* ====================== QUOTE SUCCESS ====================== */

#quoteSuccessDiv {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 80px 24px !important;
  text-align: center !important;
}

#quoteSuccessDiv h2 {
  font-size: 2em !important;
  font-weight: 800 !important;
  color: #08e57b !important;
}

#quoteSuccessDiv h3 {
  font-size: 1.1em !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  line-height: 1.6 !important;
}

#quoteSuccessDiv p {
  font-size: .9em !important;
  color: #9ca3af !important;
  line-height: 1.5 !important;
}


/* ====================== VEHICLE LOOKUP TABS ====================== */
#vehicleLookupTabs {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* Tab bar — simple inline radio-style like Chaiz */
.vlt-tab-bar {
  display: flex !important;
  gap: 24px !important;
  justify-content: center !important;
  padding: 28px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.vlt-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #9ca3af !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.92em !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  position: relative !important;
  padding-bottom: 12px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.vlt-tab::before {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid #d1d5db !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.vlt-tab::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: transparent !important;
  border-radius: 2px 2px 0 0 !important;
  transition: background 0.2s ease !important;
}

.vlt-tab:hover {
  color: #4b5563 !important;
  background: transparent !important;
}

.vlt-tab:hover::before {
  border-color: #9ca3af !important;
}

.vlt-tab.active {
  color: #1a1a2e !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.vlt-tab.active::before {
  border-color: #08e57b !important;
  background: #08e57b !important;
  box-shadow: inset 0 0 0 2.5px #fff !important;
}

.vlt-tab.active::after {
  background: #08e57b !important;
}

/* Hide SVG icons — using radio dots instead */
.vlt-tab svg {
  display: none !important;
}

/* Panels — seamless inside the form card */
.vlt-panel {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 32px 32px !important;
  margin-top: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
}

.vlt-lookup-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.vlt-input {
  flex: 1 !important;
  min-height: 52px !important;
  height: 52px !important;
  font-size: 0.95em !important;
  font-family: 'Inter', sans-serif !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  background-color: #fafafa !important;
  color: #1a1a2e !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  letter-spacing: 0.3px !important;
}

.vlt-input::placeholder {
  color: #b0b5bc !important;
  font-weight: 400 !important;
}

.vlt-input:focus {
  border-color: #08e57b !important;
  box-shadow: 0 0 0 3px rgba(8,229,123,0.12) !important;
  background-color: #fff !important;
}

.vlt-vin-input {
  text-transform: uppercase !important;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
  letter-spacing: 2px !important;
  font-size: 0.92em !important;
}

.vlt-select {
  min-height: 52px !important;
  height: 52px !important;
  width: 80px !important;
  min-width: 80px !important;
  font-size: 0.9em !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
  background-color: #fafafa !important;
  color: #1a1a2e !important;
  text-align: center !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none !important;
}

.vlt-select:focus {
  border-color: #08e57b !important;
  box-shadow: 0 0 0 3px rgba(8,229,123,0.12) !important;
}

.vlt-lookup-btn {
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 28px !important;
  background: linear-gradient(135deg, #08e57b 0%, #06d170 100%) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92em !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(8,229,123,0.25) !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
}

.vlt-lookup-btn:hover {
  background: linear-gradient(135deg, #06d170 0%, #05b862 100%) !important;
  box-shadow: 0 4px 16px rgba(8,229,123,0.35) !important;
  transform: translateY(-1px) !important;
}

.vlt-lookup-btn:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Status messages */
.vlt-status {
  margin-top: 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88em !important;
  line-height: 1.6 !important;
}

.vlt-status:empty {
  display: none !important;
}

.vlt-error {
  color: #ef4444 !important;
  font-weight: 500 !important;
}

.vlt-success {
  color: #059669 !important;
  font-weight: 500 !important;
}

.vlt-loading {
  color: #6b7280 !important;
  font-style: italic !important;
}

.vlt-info {
  color: #4b5563 !important;
  font-weight: 400 !important;
  font-size: 0.92em !important;
  line-height: 1.6 !important;
}

/* ====================== RESPONSIVE ====================== */

@media (max-width: 768px) {
  body > div:first-child { padding: 10px 16px !important; }
  #headerDiv span { font-size: .95em !important; }
  .headerNavItem { padding: 6px 16px !important; }
  #divLeadForm { padding: 28px 12px 36px !important; }
  #divLeadForm h2 { font-size: 1.6em !important; letter-spacing: -.5px !important; }
  #inputSection { grid-template-columns: 1fr !important; padding: 20px 16px !important; gap: 14px !important; margin-top: 24px !important; }
  .widerInputDiv { grid-column: span 1 !important; }
  #submitButton { width: 100% !important; max-width: 100% !important; min-width: auto !important; padding: 16px 24px !important; }
  #coveragesDiv { grid-template-columns: 1fr !important; padding: 24px 16px !important; }
  #coverageDiv { max-width: 100% !important; }
  .coverageDetailsDiv { grid-template-columns: 1fr !important; }
  #additionalInfoForm { display: block !important; }
  .inputSection { padding: 24px 16px !important; }
  #quoteDiv { padding: 0 16px 40px !important; }
  #quoteSuccessDiv { padding: 48px 16px !important; }

  /* Tab bar mobile */
  .vlt-tab-bar {
    gap: 16px !important;
    padding-top: 20px !important;
  }
  .vlt-tab {
    font-size: 0.82em !important;
    gap: 6px !important;
  }
  .vlt-tab::before {
    width: 14px !important;
    height: 14px !important;
  }
  .vlt-panel {
    padding: 24px 20px !important;
    margin-top: 16px !important;
  }
  .vlt-lookup-row {
    flex-wrap: wrap !important;
  }
  .vlt-vin-input {
    width: 100% !important;
    flex: unset !important;
  }
  #vehicleLookupTabs {
    padding: 0 16px !important;
  }

}

@media (min-width: 769px) and (max-width: 1024px) {
  #coveragesDiv { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (min-width: 1025px) {
  #coveragesDiv { grid-template-columns: repeat(3, 1fr) !important; }
  #contentDiv { max-width: 1400px !important; margin: 0 auto !important; }
}

/* ====================== LOADING ANIMATION ====================== */

/* Keyframe Animations */
@keyframes carDrive {
  0%   { transform: translateX(-12px) translateY(0) rotate(0deg); }
  12%  { transform: translateX(-4px) translateY(-5px) rotate(-1deg); }
  25%  { transform: translateX(4px) translateY(-1px) rotate(0.4deg); }
  37%  { transform: translateX(10px) translateY(-3px) rotate(-0.5deg); }
  50%  { transform: translateX(12px) translateY(0) rotate(0.2deg); }
  62%  { transform: translateX(8px) translateY(-4px) rotate(-0.6deg); }
  75%  { transform: translateX(0px) translateY(-1px) rotate(0.3deg); }
  87%  { transform: translateX(-8px) translateY(-3px) rotate(-0.4deg); }
  100% { transform: translateX(-12px) translateY(0) rotate(0deg); }
}

@keyframes roadSlide {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: -40px 0, 0 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes subtlePulse {
  0%, 100% { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12)); }
  50%      { filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)); }
}

@keyframes dotBlink {
  0%, 20%  { opacity: 0.3; }
  50%      { opacity: 1; }
  80%, 100% { opacity: 0.3; }
}

/* Loading container */
#loadingDiv {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 70vh !important;
  position: relative !important;
  background:
    radial-gradient(ellipse 500px 250px at 50% 42%, rgba(8,229,123,0.05) 0%, transparent 70%),
    linear-gradient(180deg, #f0fdf8 0%, #ffffff 45%, #fafbfc 100%) !important;
  overflow: hidden !important;
  animation: fadeInUp 0.7s ease-out !important;
}
/* Respect hidden attribute */
#loadingDiv[hidden] {
  display: none !important;
}


/* Animated car - detailed sedan SVG with spinning wheels */
#loadingDiv::before {
  content: '' !important;
  display: block !important;
  width: 180px !important;
  height: 90px !important;
  margin-bottom: 8px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 75' fill='none'%3E%3Cellipse cx='90' cy='66' rx='78' ry='5' fill='%23e5e7eb' opacity='0.6'/%3E%3Cpath d='M18,42 L32,42 L48,20 C50,17 53,15 56,15 L118,15 C122,15 125,17 128,20 L150,34 L165,38 L168,42 L170,48 L170,54 L10,54 L10,48 L12,42 Z' fill='%231a1a2e'/%3E%3Cpath d='M50,21 L56,16 L92,16 L92,40 L46,40 Z' fill='%2320b875' opacity='0.3'/%3E%3Cpath d='M97,16 L118,16 C121,16 124,18 126,20 L146,36 L146,40 L97,40 Z' fill='%2320b875' opacity='0.25'/%3E%3Cline x1='94' y1='16' x2='94' y2='40' stroke='%231a1a2e' stroke-width='2.5'/%3E%3Crect x='162' y='39' width='9' height='6' rx='2' fill='%2308e57b'/%3E%3Crect x='162' y='39' width='9' height='6' rx='2' fill='%2308e57b' opacity='0.6'%3E%3Canimate attributeName='opacity' values='0.6;1;0.6' dur='0.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='12' y='42' width='6' height='4' rx='1.5' fill='%23ef4444'/%3E%3Crect x='12' y='42' width='6' height='4' rx='1.5' fill='%23ef4444' opacity='0.5'%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='0.6s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='105' y='44' width='16' height='2' rx='1' fill='%23374151' opacity='0.5'/%3E%3Ccircle cx='52' cy='54' r='13' fill='%23111827'/%3E%3Ccircle cx='52' cy='54' r='8.5' fill='%231f2937'/%3E%3Ccircle cx='52' cy='54' r='5' fill='%23111827'/%3E%3Ccircle cx='52' cy='54' r='2' fill='%2308e57b'/%3E%3Ccircle cx='52' cy='54' r='8.5' fill='none' stroke='%23374151' stroke-width='0.5' stroke-dasharray='3 3'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 52 54;360 52 54' dur='0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='142' cy='54' r='13' fill='%23111827'/%3E%3Ccircle cx='142' cy='54' r='8.5' fill='%231f2937'/%3E%3Ccircle cx='142' cy='54' r='5' fill='%23111827'/%3E%3Ccircle cx='142' cy='54' r='2' fill='%2308e57b'/%3E%3Ccircle cx='142' cy='54' r='8.5' fill='none' stroke='%23374151' stroke-width='0.5' stroke-dasharray='3 3'%3E%3CanimateTransform attributeName='transform' type='rotate' values='0 142 54;360 142 54' dur='0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  animation: carDrive 2.8s ease-in-out infinite, subtlePulse 2s ease-in-out infinite !important;
  order: 1 !important;
  position: relative !important;
}

/* Road with animated green dashes */
#loadingImg {
  display: block !important;
  width: 400px !important;
  height: 4px !important;
  max-width: 90vw !important;
  max-height: 4px !important;
  background:
    repeating-linear-gradient(90deg, #08e57b 0px, #08e57b 18px, transparent 18px, transparent 36px),
    linear-gradient(90deg, transparent, #d1d5db 10%, #b0b5bc 50%, #d1d5db 90%, transparent) !important;
  background-size: 36px 2px, 100% 4px !important;
  background-position: 0 1px, 0 0 !important;
  background-repeat: repeat-x, no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 auto 48px !important;
  padding: 0 !important;
  order: 2 !important;
  object-position: -9999px -9999px !important;
  overflow: hidden !important;
  animation: roadSlide 0.45s linear infinite !important;
  -webkit-appearance: none !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Shimmer text */
#loadingDiv::after {
  content: 'Searching top providers for your vehicle...' !important;
  display: block !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.35em !important;
  font-weight: 600 !important;
  background: linear-gradient(90deg, #1a1a2e 0%, #1a1a2e 35%, #08e57b 50%, #1a1a2e 65%, #1a1a2e 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: shimmer 2.5s ease-in-out infinite !important;
  order: 3 !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  padding: 0 20px !important;
  letter-spacing: -0.3px !important;
}

/* Mobile loading adjustments */
@media (max-width: 768px) {
  #loadingDiv::before {
    width: 140px !important;
    height: 70px !important;
    margin-bottom: 6px !important;
  }
  #loadingImg {
    width: 280px !important;
    margin: 0 auto 36px !important;
  }
  #loadingDiv::after {
    font-size: 1.05em !important;
    padding: 0 16px !important;
  }
}