/* CSS Variables for TD Insurance Green Theme */
body.auto-quote-page{
  --primary-color: #0abab5; /* TD Green */
  --primary-hover: #0abab5; /* Darker Green */
  --profession-accent: #0abab5; /* Tiffany blue for Profession step */
  --profession-accent-light: rgba(51, 192, 180, 0.12);
  --primary-light: #e8f8f7; /* Soft Green background */
  --primary-glow: rgba(0, 138, 0, 0.12);
  
  --dark-green: #0abab5; /* Dark Forest Green for headers and accents */
  
  --text-dark: #2F2F2E; /* Charcoal/Off-black */
  --text-medium: #666666; /* Medium Grey */
  --text-light: #767676; /* Muted Grey */
  
  --bg-page: #f4fbfa; /* Soft green-gray background */
  --bg-card: #FFFFFF; /* Pure White background for form container */
  --border-color: #CCCCCC; /* Muted light border */
  --border-focus: #0abab5;
  
  --error-color: #0abab5;
  --error-bg: rgba(51, 192, 180, 0.10); /* Soft red tint */
  --success-color: #0abab5;
  --success-bg: #e8f8f7;
  
  --font-sans: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --border-radius: 4px;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  
  --transition-smooth: all 0.2s ease-in-out;
}

/* Global Utilities */
.auto-quote-page .hidden{
  display: none !important;
}

/* Global Reset & Base Styles */
.auto-quote-page *, .auto-quote-page *::before, .auto-quote-page *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.auto-quote-page{
  scroll-behavior: smooth;
}

body.auto-quote-page{
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-dark);
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* Sticky Header */
.auto-quote-page .sticky-header{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: rgb(230, 0, 0);
  border-top: 0;
  border-bottom: 1px solid rgb(230, 0, 0);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.03);
  z-index: 1000;
}

.auto-quote-page .header-container{
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.auto-quote-page .header-logo{
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.auto-quote-page .logo-img{
  max-height: 32px; /* Reduced from 48px to look compact and premium */
  width: auto;
  object-fit: contain;
}

.auto-quote-page .header-title{
  flex: 2;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  padding: 0 16px;
}

.auto-quote-page .header-phone{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.auto-quote-page .phone-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
  color: var(--text-dark);
  font-size: 15px;
  transition: var(--transition-smooth);
}

.auto-quote-page .phone-link:hover{
  color: var(--primary-color);
}

.auto-quote-page .phone-icon{
  display: none; /* Hide old phone icon to match TD screenshot */
}

.auto-quote-page .phone-number{
  border-bottom: 1.5px solid transparent;
}

.auto-quote-page .phone-link:hover .phone-number{
  border-bottom-color: var(--primary-color);
}

.auto-quote-page .phone-arrow{
  margin-left: 6px;
  font-size: 14px;
  font-weight: bold;
  color: var(--primary-color);
}

/* Progress Subheader */
.auto-quote-page .progress-subheader{
  background-color: #FFFFFF;
  border-bottom: 1px solid #EAEAEA;
  padding: 14px 0 0 0;
  position: sticky;
  top: 70px; /* Adjusted to match sticky-header height of 70px */
  z-index: 990;
}

.auto-quote-page .progress-container{
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 12px 24px;
}

.auto-quote-page .progress-left{
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-medium);
}

.auto-quote-page .progress-step-text strong{
  color: var(--text-dark);
  font-weight: 700;
}

.auto-quote-page .progress-divider{
  margin: 0 8px;
  color: var(--border-color);
}

.auto-quote-page .progress-title-text{
  font-weight: 500;
  color: var(--text-dark);
}

.auto-quote-page .progress-right{
  display: flex;
  align-items: center;
}

.auto-quote-page .secure-badge{
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color); /* Matches TD green lock badge */
}

.auto-quote-page .secure-icon{
  margin-right: 4px;
  font-size: 12px;
}

/* Visual Progress Line */
.auto-quote-page .progress-bar-bg{
  width: 100%;
  height: 2px; /* Very thin, clean line */
  background-color: #EAEAEA;
  position: relative;
}

.auto-quote-page .progress-bar-fill{
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Main Content Area */
.auto-quote-page .main-content{
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 100px 24px;
  display: flex;
  justify-content: center;
}

.auto-quote-page .form-wrapper{
  width: 100%;
  max-width: 720px;
  overflow: visible;
  position: relative;
  transition: height 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.auto-quote-page #quote-form{
  display: block;
  width: 100%;
}

/* Step Cards - elegant white card containers */
.auto-quote-page .step-card{
  background-color: var(--bg-card);
  border: 1px solid #E4EBE7;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 63, 45, 0.05);
  padding: 48px 40px;
  width: 100%;
  display: none; /* Hide inactive step cards completely from flow */
  opacity: 0;
}

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

.auto-quote-page .step-card.active{
  display: block;
  animation: fadeInCard 0.4s ease forwards;
  pointer-events: auto;
}

.auto-quote-page .step-card.completed{
  display: none; /* Keep completed steps out of the layout flow */
}

/* Step Header - Centered and clean */
.auto-quote-page .step-header{
  margin-bottom: 10px;
  text-align: center;
}

.auto-quote-page .step-question{
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--dark-green); /* TD Dark Forest Green */
  margin-bottom: 12px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.auto-quote-page .step-question::after{
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  margin-left: 8px;
  vertical-align: middle;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  top: -3px;
}

.auto-quote-page .step-instruction{
  font-size: 16px;
  color: var(--text-medium);
  line-height: 1.5;
}

/* Main heading color only: if the step header has only one instruction line,
   that line is the top/main heading. Helper text below an H2 stays grey. */
.auto-quote-page .step-header > .step-instruction:only-child{
  color: var(--primary-color);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

/* Step Body centered container */
.auto-quote-page .step-body{
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* Form Groups and Inputs */
.auto-quote-page .form-group{
  margin-bottom: 24px;
  position: relative;
}

.auto-quote-page .field-subtext{
  font-size: 13px;
  color: var(--text-medium);
  margin-top: 8px;
  line-height: 1.4;
}

/* Premium Outlined Input Box (TD Style) */
.auto-quote-page .input-wrapper{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 8px 16px 10px 16px;
  background-color: #FFFFFF;
  transition: var(--transition-smooth);
  cursor: text;
}

.auto-quote-page .input-wrapper.input-with-icon{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.auto-quote-page .input-inner{
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Float-styled label inside the box */
.auto-quote-page .input-wrapper .field-label{
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

/* Clean, borderless input fields */
.auto-quote-page .input-wrapper input[type="text"], .auto-quote-page .input-wrapper select{
  width: 100%;
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 0 0 !important;
  font-family: var(--font-sans);
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  height: auto;
  line-height: 1.3;
}

.auto-quote-page .input-wrapper input[type="text"]::placeholder{
  color: var(--text-light);
  opacity: 0.6;
  font-weight: 400;
  font-size:11px;
}

/* Input Focus States */
.auto-quote-page .input-wrapper:focus-within{
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

/* Custom Icons Inside Inputs */
.auto-quote-page .input-icon-btn{
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  outline: none;
  margin-left: 10px;
  transition: var(--transition-smooth);
}

.auto-quote-page .input-icon-btn:hover{
  transform: scale(1.1);
}

.auto-quote-page .select-chevron{
  font-size: 11px;
  color: var(--text-light);
  pointer-events: none;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
}

/* Custom Calendar Popup */
.auto-quote-page .custom-calendar-popup{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  width: 100%;
  max-width: 320px;
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  padding: 16px;
  z-index: 1010;
}

.auto-quote-page .custom-calendar-popup.hidden{
  display: none;
}

.auto-quote-page .calendar-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.auto-quote-page .cal-nav-btn{
  background: none;
  border: 1px solid var(--border-color);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-medium);
  transition: var(--transition-smooth);
}

.auto-quote-page .cal-nav-btn:hover{
  border-color: var(--primary-color);
  color: var(--primary-color);
  background-color: var(--primary-light);
}

.auto-quote-page .cal-title{
  font-weight: 700;
  font-size: 14px;
  color: var(--text-dark);
}

.auto-quote-page .calendar-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 6px;
}

.auto-quote-page .calendar-days{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

.auto-quote-page .cal-day-cell{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  transition: var(--transition-smooth);
}

.auto-quote-page .cal-day-cell:hover:not(.disabled){
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: bold;
}

.auto-quote-page .cal-day-cell.selected{
  background-color: var(--primary-color) !important;
  color: #FFFFFF !important;
  font-weight: bold;
}

.auto-quote-page .cal-day-cell.disabled{
  color: var(--border-color);
  cursor: not-allowed;
  background: none;
}

.auto-quote-page .cal-day-cell.today{
  border: 1px solid var(--primary-color);
  font-weight: bold;
}

/* Custom Autocomplete Dropdown List */
.auto-quote-page .industry-dropdown-list{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1010;
}

.auto-quote-page .industry-dropdown-list.hidden{
  display: none;
}

.auto-quote-page .dropdown-item{
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.auto-quote-page .dropdown-item:hover, .auto-quote-page .dropdown-item.highlighted{
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 500;
}

.auto-quote-page .dropdown-item-no-results{
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
}

/* Profession step accent: darker than #0abab5 */
.auto-quote-page #step-1 .searchable-select-group .input-wrapper:focus-within{
  border-color: var(--profession-accent);
  box-shadow: 0 0 0 1px var(--profession-accent);
}

.auto-quote-page #step-1 .searchable-select-group .select-chevron{
  color: var(--profession-accent);
}

.auto-quote-page #step-1 .industry-dropdown-list{
  border-color: rgba(37, 153, 143, 0.35);
}

.auto-quote-page #step-1 .dropdown-item:hover, .auto-quote-page #step-1 .dropdown-item.highlighted{
  background-color: var(--profession-accent-light);
  color: var(--profession-accent);
}

.auto-quote-page #step-1 .dropdown-item-badge{
  background-color: var(--profession-accent-light);
  color: var(--profession-accent);
}

.auto-quote-page #step-1 .dropdown-custom-profession{
  border-top: 1px solid rgba(37, 153, 143, 0.18);
  padding: 12px 14px 14px 14px;
  background: #FFFFFF;
}

.auto-quote-page #step-1 .dropdown-custom-label{
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--profession-accent);
  margin-bottom: 8px;
}

.auto-quote-page #step-1 .dropdown-custom-input{
  width: 100%;
  border: 1px solid rgba(37, 153, 143, 0.35);
  border-radius: var(--border-radius);
  background: #FFFFFF;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  outline: none;
}

.auto-quote-page #step-1 .dropdown-custom-input:focus{
  border-color: var(--profession-accent);
  box-shadow: 0 0 0 1px var(--profession-accent);
}

.auto-quote-page #step-1 .custom-profession-option{
  border-top: 1px solid rgba(37, 153, 143, 0.18);
}

.auto-quote-page #step-1 .custom-profession-option .dropdown-item-title{
  color: var(--profession-accent);
}

/* Step 3 & 4: Grid Layouts */
.auto-quote-page .address-fields-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.auto-quote-page .col-span-full{
  grid-column: span 2;
}

.auto-quote-page .owner-fields-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.auto-quote-page .subsection-title{
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 16px;
  margin-bottom: 4px;
  grid-column: span 2;
}

.auto-quote-page .dob-group{
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 12px;
}

/* Custom Select drop arrows wrapper (internal select styling) */
.auto-quote-page .input-wrapper select{
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23767676' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right -6px center;
  padding-right: 24px !important;
}

/* Custom Gender Buttons */
.auto-quote-page .gender-btn-group{
  display: flex;
  gap: 12px;
  grid-column: span 2;
}

.auto-quote-page .gender-btn{
  flex: 1;
  padding: 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  outline: none;
  transition: var(--transition-smooth);
}

.auto-quote-page .gender-btn:hover{
  background-color: #F9F9F9;
  border-color: var(--text-light);
}

.auto-quote-page .gender-btn.active{
  background-color: var(--primary-color);
  color: #FFFFFF;
  border-color: var(--primary-color);
}

/* Reusable Yes/No Toggles */
.auto-quote-page .toggle-btn-group{
  display: flex;
  gap: 12px;
}

.auto-quote-page .toggle-btn{
  flex: 1;
  padding: 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  outline: none;
  transition: var(--transition-smooth);
  text-align: center;
}

.auto-quote-page .toggle-btn:hover{
  background-color: #F9F9F9;
  border-color: var(--text-light);
}

.auto-quote-page .toggle-btn.active{
  background-color: var(--primary-color);
  color: #FFFFFF;
  border-color: var(--primary-color);
}

/* Privacy Consent callout styling */
.auto-quote-page .privacy-consent-group{
  margin-top: 24px;
}

.auto-quote-page .privacy-intro-block{
  margin-bottom: 14px;
}

.auto-quote-page .privacy-heading{
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 10px;
}

.auto-quote-page .privacy-intro-text{
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.45;
}

.auto-quote-page .privacy-callout-card{
  background-color: #F9F9F9;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 18px 20px;
}

.auto-quote-page .privacy-consent-text{
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.65;
}

.auto-quote-page .privacy-consent-text + .privacy-consent-text{
  margin-top: 14px;
}

.auto-quote-page .privacy-agreement{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  user-select: none;
}

.auto-quote-page .privacy-checkbox-input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.auto-quote-page .privacy-checkbox-box{
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1.5px solid var(--border-color);
  border-radius: 3px;
  background-color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.auto-quote-page .privacy-checkbox-input:checked + .privacy-checkbox-box{
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.auto-quote-page .privacy-checkbox-input:checked + .privacy-checkbox-box::after{
  content: "✓";
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.auto-quote-page .privacy-checkbox-input:focus + .privacy-checkbox-box{
  box-shadow: 0 0 0 3px rgba(51, 192, 180, 0.18);
}

.auto-quote-page .privacy-consent-group.has-error .privacy-callout-card{
  border-color: var(--error-color);
  background-color: var(--error-bg);
}

/* Navigation Actions - Centered Next button, Help link underneath */
.auto-quote-page .step-navigation{
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #EAEAEA;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.auto-quote-page .btn{
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--border-radius);
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
  padding: 12px 32px;
  white-space: nowrap;
  border: none;
}

.auto-quote-page .btn-primary, .auto-quote-page .btn-next, .auto-quote-page .btn-submit{
  background-color: var(--primary-color) !important;
  color: #FFFFFF !important;
  width: 100%;
  max-width: 240px;
}

.auto-quote-page .btn-primary:hover, .auto-quote-page .btn-next:hover, .auto-quote-page .btn-submit:hover{
  background-color: var(--primary-hover) !important;
}

.auto-quote-page .btn-primary:active, .auto-quote-page .btn-next:active, .auto-quote-page .btn-submit:active{
  transform: translateY(1px);
}

/* Hide inline back button completely as it is now at the top left */
.auto-quote-page .step-navigation .btn-back{
  display: none !important;
}

/* Help link - Styled as a centered text link underneath the Next button */
.auto-quote-page .navigation-links{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.auto-quote-page .help-link{
  color: var(--primary-color);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  padding: 0;
  transition: var(--transition-smooth);
}

.auto-quote-page .help-link:hover{
  color: var(--primary-hover);
}

/* Global Back Button Layout (placed below subheader) */
.auto-quote-page .global-back-container{
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: 16px 24px 0 24px;
  display: flex;
  justify-content: flex-start;
}

.auto-quote-page .btn-global-back{
  background: transparent !important;
  border: none !important;
  color: var(--primary-color) !important;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
  transition: var(--transition-smooth);
}

.auto-quote-page .btn-global-back:hover{
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}

.auto-quote-page .btn-global-back i{
  font-size: 13px;
  margin-right: 4px;
}

/* Error Validations Styling */
.auto-quote-page .error-message{
  color: var(--error-color);
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  display: none;
}

/* When form-group has error, style nested outlined wrapper */
.auto-quote-page .form-group.has-error .input-wrapper{
  border-color: var(--error-color) !important;
  background-color: var(--error-bg);
}

.auto-quote-page .form-group.has-error .error-message{
  display: block;
}

/* Success Card Screen */
.auto-quote-page .success-card{
  background-color: #FFFFFF;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  padding: 50px 40px;
  text-align: center;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.auto-quote-page .success-icon-container{
  width: 64px;
  height: 64px;
  background-color: var(--success-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border: 2px solid var(--success-color);
}

.auto-quote-page .success-checkmark{
  color: var(--success-color);
  font-size: 32px;
  font-weight: bold;
}

.auto-quote-page .success-title{
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.auto-quote-page .success-lead{
  font-size: 16px;
  color: var(--text-medium);
  max-width: 500px;
  margin-bottom: 32px;
  line-height: 1.5;
}

.auto-quote-page .summary-box{
  width: 100%;
  background-color: #F9F9F9;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  padding: 24px;
  text-align: left;
  margin-bottom: 32px;
}

.auto-quote-page .summary-title{
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.auto-quote-page .summary-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.auto-quote-page .summary-item{
  display: flex;
  flex-direction: column;
}

.auto-quote-page .summary-label{
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  font-weight: 600;
}

.auto-quote-page .summary-val{
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-top: 2px;
}

/* Footer Section - Overhauled to TD style */
.auto-quote-page .form-footer{
  background: linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86));
  color: rgba(255, 255, 255, 0.82);
  padding: 46px 24px 32px 24px;
  border-top: 4px solid var(--primary-color);
  position: relative;
}

.auto-quote-page .footer-container{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auto-quote-page .footer-top-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.auto-quote-page .footer-armchair{
  max-height: 72px;
  width: auto;
  object-fit: contain;
}

.auto-quote-page .footer-contact-block{
  text-align: left;
}

.auto-quote-page .footer-contact-title{
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.auto-quote-page .footer-contact-phone{
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  transition: var(--transition-smooth);
}

.auto-quote-page .footer-contact-phone:hover{
  color: var(--primary-color);
}

.auto-quote-page .footer-contact-phone-arrow{
  color: var(--primary-color);
  font-weight: 900;
  margin-left: 2px;
}

.auto-quote-page .footer-hours{
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.auto-quote-page .footer-links-row{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
}

.auto-quote-page .footer-link{
  color: var(--primary-color) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 13.5px;
  transition: var(--transition-smooth);
}

.auto-quote-page .footer-link:hover{
  text-decoration: underline !important;
  color: var(--primary-hover) !important;
}

.auto-quote-page .footer-underwriter{
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 6px;
  text-align: center;
}

.auto-quote-page .footer-copyright{
  font-size: 14px;
  color: #FFFFFF;
  text-align: left;
  margin: 0;
}

.auto-quote-page .footer-bottom-row{
  width: 100%;
  border-top: 1px solid rgba(51, 192, 180, 0.65);
  margin-top: 34px;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.auto-quote-page .footer-made-canada{
  font-size: 14px;
  color: #FFFFFF;
  text-align: right;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.auto-quote-page .canada-flag{
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.auto-quote-page .canada-flag-svg{
  width: 18px;
  height: 12px;
  display: block;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}

/* Capsule Scroll-to-Top Button */
.auto-quote-page .btn-scroll-top{
  position: absolute;
  right: 40px;
  bottom: 40px;
  background-color: #FFFFFF;
  border: 1.5px solid var(--primary-color);
  color: var(--primary-color);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.auto-quote-page .btn-scroll-top:hover{
  background-color: var(--primary-light);
  color: var(--primary-hover);
  border-color: var(--primary-hover);
}

.auto-quote-page .btn-scroll-top-arrow{
  font-size: 11px;
  font-weight: bold;
}

/* Help Modal Overlay */
.auto-quote-page .modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.auto-quote-page .modal-overlay.hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.auto-quote-page .modal-card{
  background-color: #FFFFFF;
  border-radius: var(--border-radius);
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
}

.auto-quote-page .modal-close-btn{
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1;
  transition: var(--transition-smooth);
  z-index: 10;
}

.auto-quote-page .modal-close-btn:hover{
  color: var(--text-dark);
}

.auto-quote-page .modal-header{
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.auto-quote-page .modal-icon{
  font-size: 20px;
}

.auto-quote-page .modal-title{
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}

.auto-quote-page .modal-body{
  padding: 24px;
  overflow-y: auto;
}

.auto-quote-page .modal-intro{
  font-size: 15px;
  color: var(--text-medium);
  margin-bottom: 20px;
}

.auto-quote-page .help-section{
  background-color: #F9F9F9;
  border-radius: var(--border-radius);
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.auto-quote-page .help-section h4{
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.auto-quote-page .help-section p{
  font-size: 13.5px;
  color: var(--text-medium);
  margin-bottom: 12px;
}

.auto-quote-page .help-phone-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
}

.auto-quote-page .help-phone-btn:hover{
  background-color: var(--primary-hover);
}

.auto-quote-page .help-hours{
  display: block;
  font-size: 11px;
  color: var(--text-light);
  margin-top: 8px;
}

/* FAQ Accordion */
.auto-quote-page .help-faq-section h4{
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.auto-quote-page .faq-item{
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
}

.auto-quote-page .faq-item:last-child{
  border-bottom: none;
}

.auto-quote-page .faq-question{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.auto-quote-page .faq-question:hover{
  color: var(--primary-color);
}

.auto-quote-page .faq-toggle{
  font-size: 14px;
  color: var(--text-light);
  transition: transform 0.2s ease;
}

.auto-quote-page .faq-question.active .faq-toggle{
  transform: rotate(45deg);
  color: var(--primary-color);
}

.auto-quote-page .faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 13px;
  color: var(--text-medium);
}

.auto-quote-page .faq-answer p{
  padding-top: 8px;
  line-height: 1.5;
}

.auto-quote-page .faq-question.active + .faq-answer{
  max-height: 160px;
}

.auto-quote-page .modal-footer{
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.auto-quote-page .modal-footer .btn{
  max-width: 140px;
  padding: 10px 16px;
  font-size: 14px;
}

/* ==========================================
   REVENUE SLIDER (Step 8)
   ========================================== */
.auto-quote-page .revenue-slider-container{
  margin-bottom: 24px;
}

.auto-quote-page .revenue-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--primary-color) 0%,
    var(--primary-color) 10%,
    var(--border-color) 10%,
    var(--border-color) 100%
  );
  outline: none;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.1s;
}

.auto-quote-page .revenue-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--primary-color);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 138, 0, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auto-quote-page .revenue-slider::-webkit-slider-thumb:hover{
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 138, 0, 0.3);
}

.auto-quote-page .revenue-slider::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--primary-color);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 138, 0, 0.2);
}

.auto-quote-page .slider-labels{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 600;
  margin-top: 6px;
}

.auto-quote-page .revenue-display-box{
  background-color: #F9F9F9;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.auto-quote-page .revenue-display-label{
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

.auto-quote-page .revenue-display-value{
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: var(--font-heading);
  letter-spacing: -0.5px;
}

/* ==========================================
   RADIO CARD BUTTONS (Step 6 Location Type)
   ========================================== */
.auto-quote-page .radio-card-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.auto-quote-page .radio-card-btn{
  padding: 14px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  outline: none;
  transition: var(--transition-smooth);
  text-align: center;
  line-height: 1.3;
}

.auto-quote-page .radio-card-btn:hover{
  background-color: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.auto-quote-page .radio-card-btn.active{
  background-color: var(--primary-color);
  color: #FFFFFF;
  border-color: var(--primary-color);
}

/* ==========================================
   CONDITIONAL SECTIONS (smooth reveal)
   ========================================== */
.auto-quote-page .conditional-section{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease,
              margin-top 0.35s ease;
  margin-top: 0;
  /* Don't use display:none so CSS transitions work */
}

.auto-quote-page .conditional-section.hidden{
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
}

.auto-quote-page .conditional-section:not(.hidden){
  max-height: 900px;
  opacity: 1;
  pointer-events: auto;
  margin-top: 24px;
}

/* Responsiveness (Mobile layout adjustments) */
@media (max-width: 768px){
  .auto-quote-page .sticky-header{
    height: 52px;
    border-top-width: 3px;
  }

  .auto-quote-page .header-container{
    padding: 0 12px;
    gap: 8px;
  }

  .auto-quote-page .header-logo{
    flex: 0 0 auto; /* don't stretch */
  }

  .auto-quote-page .logo-img{
    max-height: 28px;
  }

  .auto-quote-page .header-title{
    display: none; /* Hide middle title on phone screen */
  }

  /* Show only phone icon + number in compact form */
  .auto-quote-page .phone-link{
    font-size: 12px;
    font-weight: 600;
  }

  .auto-quote-page .phone-icon{
    font-size: 12px;
    margin-right: 4px;
  }

  .auto-quote-page .phone-arrow{
    display: none;
  }

  /* Progress subheader adjustments */
  .auto-quote-page .progress-subheader{
    top: 52px;
  }

  .auto-quote-page .progress-container{
    padding: 0 12px 8px 12px;
  }

  .auto-quote-page .progress-left{
    font-size: 12px;
  }

  .auto-quote-page .secure-badge{
    font-size: 11px;
  }

  .auto-quote-page .main-content{
    padding: 32px 16px 60px 16px;
  }

  .auto-quote-page .step-question{
    font-size: 22px;
  }

  .auto-quote-page .step-instruction{
    font-size: 14px;
  }

  .auto-quote-page .address-fields-grid, .auto-quote-page .owner-fields-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .auto-quote-page .col-span-full{
    grid-column: span 1;
  }

  .auto-quote-page .subsection-title{
    grid-column: span 1;
    font-size: 16px;
  }

  .auto-quote-page .dob-group{
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 8px;
  }

  /* Navigation row on mobile */
  .auto-quote-page .step-navigation{
    margin-top: 28px;
    padding-top: 16px;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .auto-quote-page .btn-primary, .auto-quote-page .btn-next, .auto-quote-page .btn-submit{
    grid-column: span 2;
    max-width: 100%;
  }

  .auto-quote-page .step-navigation .btn-back{
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    margin-left: 0;
  }

  .auto-quote-page .step-navigation .navigation-links{
    grid-row: 2;
    grid-column: 2;
    justify-self: center;
    margin-right: 0;
  }

  .auto-quote-page .btn{
    font-size: 14px;
    padding: 11px 16px;
  }

  .auto-quote-page .help-link{
    font-size: 13px;
  }
}

/* Extra small phones */
@media (max-width: 380px){
  .auto-quote-page .phone-number{
    display: none; /* Only show phone icon on very small screens */
  }

  .auto-quote-page .phone-icon{
    margin-right: 0;
  }

  .auto-quote-page .logo-img{
    max-height: 24px;
  }

  .auto-quote-page .btn{
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* DB-powered profession dropdown with category badge */
.auto-quote-page .dropdown-item-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auto-quote-page .dropdown-item-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
}

.auto-quote-page .dropdown-item-badge{
  flex: 0 0 auto;
  max-width: 44%;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--text-medium);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.auto-quote-page .dropdown-item-subtext{
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-medium);
  line-height: 1.35;
}


/* Custom red header and contact links */
.auto-quote-page .sticky-header{
  background-color: rgb(230, 0, 0);
  border-top: 0;
  border-bottom: 1px solid rgb(230, 0, 0);
}

.auto-quote-page .sticky-header .header-title, .auto-quote-page .sticky-header .phone-link, .auto-quote-page .sticky-header .phone-number, .auto-quote-page .sticky-header .phone-icon, .auto-quote-page .sticky-header .whatsapp-icon{
  color: #FFFFFF;
}

.auto-quote-page .sticky-header .phone-link:hover{
  color: #FFFFFF;
  opacity: 0.9;
}

.auto-quote-page .sticky-header .phone-link:hover .phone-number{
  border-bottom-color: #FFFFFF;
}

.auto-quote-page .header-contact-actions{
  gap: 14px;
  flex-wrap: wrap;
}

.auto-quote-page .header-contact-link{
  gap: 7px;
  color: #FFFFFF;
}

.auto-quote-page .header-contact-link .phone-icon, .auto-quote-page .header-contact-link .whatsapp-icon{
  display: inline-flex;
  font-size: 17px;
}

.auto-quote-page .header-contact-link .phone-number{
  color: #FFFFFF;
  line-height: 1.2;
}

.auto-quote-page .logo-img{
  
  border-radius: 4px;
  padding: 3px 8px;
  max-height: 40px;
}

.auto-quote-page .footer-contact-title i{
  margin-right: 5px;
}

.auto-quote-page .footer-contact-separator{
  color: var(--text-light);
  font-weight: 400;
  margin: 0 6px;
}

.auto-quote-page .footer-whatsapp i{
  font-size: 18px;
}

@media (max-width: 768px){
  .auto-quote-page .header-contact-actions{
    gap: 10px;
  }

  .auto-quote-page .header-contact-link .phone-number{
    font-size: 13px;
  }
}

@media (max-width: 480px){
  .auto-quote-page .header-contact-link .phone-number{
    display: none;
  }

  .auto-quote-page .header-contact-link .phone-icon, .auto-quote-page .header-contact-link .whatsapp-icon{
    font-size: 20px;
  }
}

/* Floating placeholder fields: placeholder shows first, then label appears on click/focus or after value is entered */
.auto-quote-page .input-wrapper.floating-placeholder .field-label{
  display: none;
  margin-bottom: 2px;
}

.auto-quote-page .input-wrapper.floating-placeholder.is-focused .field-label, .auto-quote-page .input-wrapper.floating-placeholder.has-value .field-label{
  display: block;
}

.auto-quote-page .input-wrapper.floating-placeholder:not(.is-focused):not(.has-value){
  padding-top: 14px;
  padding-bottom: 14px;
}

.auto-quote-page .input-wrapper.floating-placeholder:not(.is-focused):not(.has-value) input[type="text"]{
  padding-top: 0 !important;
}

.auto-quote-page .input-wrapper.floating-placeholder input[type="text"]::placeholder{
  color: var(--text-light);
  opacity: 0.75;
  font-size: 15px;
  font-weight: 400;
}

.auto-quote-page .input-wrapper.floating-placeholder.is-focused input[type="text"]::placeholder, .auto-quote-page .input-wrapper.floating-placeholder.has-value input[type="text"]::placeholder{
  opacity: 0;
}

.auto-quote-page .input-wrapper.floating-placeholder select{
  cursor: pointer;
}

/* Step 1 keeps placeholder-only behavior; label should not appear on focus/click */
.auto-quote-page #step-1 .searchable-select-group .field-label{
  display: none !important;
}

.auto-quote-page #step-1 .searchable-select-group .input-wrapper input[type="text"]{
  padding-top: 0 !important;
}

/* Clean footer after removing extra links/items */
.auto-quote-page .form-footer .footer-contact-block{
  text-align: center;
}



@media (max-width: 640px){
  .auto-quote-page .footer-bottom-row{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .auto-quote-page .footer-copyright, .auto-quote-page .footer-made-canada{
    text-align: center;
  }
}

/* Step 10 coverage checkbox cards */
.auto-quote-page .coverage-options-group{
  margin-top: 4px;
}

.auto-quote-page .coverage-checkbox-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auto-quote-page .coverage-checkbox-card{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: #FFFFFF;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.auto-quote-page .coverage-checkbox-card:hover{
  border-color: var(--primary-color);
  background: rgba(51, 192, 180, 0.05);
}

.auto-quote-page .coverage-checkbox-input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.auto-quote-page .coverage-checkbox-box{
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: var(--transition-smooth);
}

.auto-quote-page .coverage-checkbox-input:checked + .coverage-checkbox-box{
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.auto-quote-page .coverage-checkbox-input:checked + .coverage-checkbox-box::after{
  content: "✓";
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.auto-quote-page .coverage-checkbox-input:focus + .coverage-checkbox-box{
  box-shadow: 0 0 0 3px rgba(51, 192, 180, 0.18);
}

.auto-quote-page .coverage-checkbox-content{
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text-dark);
}

.auto-quote-page .coverage-checkbox-content strong{
  font-size: 15px;
  line-height: 1.35;
}

.auto-quote-page .coverage-checkbox-content small{
  font-size: 13px;
  color: var(--text-medium);
  line-height: 1.45;
}

.auto-quote-page .coverage-options-group.has-error .coverage-checkbox-list{
  border: 1px solid var(--error-color);
  border-radius: var(--border-radius);
  padding: 8px;
  background: var(--error-bg);
}

.auto-quote-page .coverage-other-field{
  margin-top: 18px;
}

/* Logo link + mobile footer line fixes */
.auto-quote-page .header-logo{
  text-decoration: none !important;
  cursor: pointer;
}

.auto-quote-page .header-logo .logo-img{
  display: block;
}

.auto-quote-page .footer-contact-title{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  line-height: 1.45;
  text-align: center;
}

.auto-quote-page .footer-contact-heading{
  display: inline-block;
}

.auto-quote-page .canada-flag-svg{
  display: block;
  width: 18px;
  height: auto;
  border-radius: 1px;
}

@media (max-width: 640px){
  .auto-quote-page .form-footer{
    padding: 34px 16px 24px 16px;
  }

  .auto-quote-page .footer-contact-block{
    width: 100%;
    text-align: center;
  }

  .auto-quote-page .footer-contact-title{
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .auto-quote-page .footer-contact-heading, .auto-quote-page .footer-contact-phone{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    line-height: 1.35;
    text-align: center;
  }

  .auto-quote-page .footer-contact-separator{
    display: none !important;
  }

  .auto-quote-page .footer-hours{
    max-width: 330px;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
  }

  .auto-quote-page .footer-bottom-row{
    margin-top: 22px;
    padding-top: 18px;
    gap: 8px;
  }

  .auto-quote-page .footer-copyright, .auto-quote-page .footer-made-canada{
    width: 100%;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    font-size: 13px;
  }
}



/* Footer online support agent */
.auto-quote-page .footer-support-agent{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 0 0 28px 0;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(51, 192, 180, 0.45);
}

.auto-quote-page .footer-support-avatar-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 108px;
}

.auto-quote-page .footer-support-avatar{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: contain;
  object-position: center center;
  border: 4px solid rgba(255, 255, 255, 0.92);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.auto-quote-page .footer-support-online{
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.96);
  border: 1px solid rgba(187, 247, 208, 0.95);
  color: #089895;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.auto-quote-page .online-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0abab5;
  display: inline-block;
  animation: onlineFlash 1.05s ease-in-out infinite;
  box-shadow: 0 0 0 rgba(34, 197, 94, 0.65);
}

@keyframes onlineDotPulse {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  70% {
    transform: scale(1.15);
    opacity: 0.95;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes onlineTextBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.auto-quote-page .footer-support-content{
  text-align: left;
  max-width: 620px;
}

.auto-quote-page .footer-support-content h3{
  margin: 0 0 6px 0;
  color: #ffffff;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
}

.auto-quote-page .footer-support-content p{
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.5;
}

.auto-quote-page .footer-support-actions{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auto-quote-page .footer-support-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  background: #dc2626;
  color: #ffffff !important;
  border: 1px solid #dc2626;
  text-decoration: none !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  transition: var(--transition-smooth);
}

.auto-quote-page .footer-support-btn:hover{
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.auto-quote-page .footer-support-btn-outline{
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff !important;
}

.auto-quote-page .footer-support-btn-outline:hover{
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff !important;
}

@media (max-width: 640px){
  .auto-quote-page .footer-support-agent{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  .auto-quote-page .footer-support-avatar{
    width: 84px;
    height: 84px;
  }

  .auto-quote-page .footer-support-content{
    text-align: center;
    max-width: 100%;
  }

  .auto-quote-page .footer-support-content h3{
    font-size: 21px;
  }

  .auto-quote-page .footer-support-content p{
    font-size: 14px;
  }

  .auto-quote-page .footer-support-actions{
    justify-content: center;
  }

  .auto-quote-page .footer-support-btn{
    min-width: 116px;
  }
}

/* ===== User requested updates: solid category badges + 5-step vertical flow ===== */
.auto-quote-page #step-1 .dropdown-item-badge, .auto-quote-page .dropdown-item-badge{
  background: var(--profession-accent, #0abab5) !important;
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(51,192,180,0.18);
}

.auto-quote-page #step-1 .dropdown-item:hover .dropdown-item-badge, .auto-quote-page #step-1 .dropdown-item.highlighted .dropdown-item-badge, .auto-quote-page .dropdown-item:hover .dropdown-item-badge, .auto-quote-page .dropdown-item.highlighted .dropdown-item-badge{
  background: var(--profession-accent, #0abab5) !important;
  color: #ffffff !important;
}

/* After the 5th internal card, keep completed cards visible above and show the next card below. */
.auto-quote-page .form-wrapper.vertical-flow{
  height: auto !important;
}

.auto-quote-page .form-wrapper.vertical-flow .step-card.completed{
  display: none;
}

.auto-quote-page .form-wrapper.vertical-flow .step-card.completed.flow-visible{
  display: block;
  opacity: 1;
  margin-bottom: 18px;
  pointer-events: auto;
}

.auto-quote-page .form-wrapper.vertical-flow .step-card.active{
  display: block;
  margin-bottom: 18px;
}

.auto-quote-page .form-wrapper.vertical-flow .step-card.completed.flow-visible .step-navigation{
  display: none;
}

.auto-quote-page .form-wrapper.vertical-flow .step-card.completed.flow-visible{
  box-shadow: 0 2px 10px rgba(0, 63, 45, 0.04);
}


/* Completed step update button for step-5 vertical flow */
.auto-quote-page .form-wrapper.vertical-flow .completed-step-actions{
  display: flex;
  justify-content: flex-end;
  padding: 0 24px 22px;
}

.auto-quote-page .form-wrapper.vertical-flow .btn-update-step{
  background: var(--profession-accent, #0abab5);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(51,192,180,0.18);
}

.auto-quote-page .form-wrapper.vertical-flow .btn-update-step:hover{
  transform: translateY(-1px);
}

/* ===== Compact Sonny agent inside existing footer row ===== */
.auto-quote-page .footer-main-row{
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 74px;
}

.auto-quote-page .footer-main-row .footer-support-agent{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  margin: 0;
  border-bottom: 0;
  max-width: 285px;
}

.auto-quote-page .footer-main-row .footer-support-avatar-wrap{
  min-width: 58px;
  align-items: center;
}

.auto-quote-page .footer-main-row .footer-support-avatar{
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
  object-fit: contain;
  object-position: center center;
  background: #ffffff;
  padding: 2px;
}

.auto-quote-page .footer-main-row .footer-support-online{
  margin-top: 5px;
  gap: 4px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
}

.auto-quote-page .footer-main-row .online-dot{
  width: 7px;
  height: 7px;
}

.auto-quote-page .footer-main-row .footer-support-content{
  max-width: 210px;
  text-align: left;
}

.auto-quote-page .footer-main-row .footer-support-content h3{
  margin: 0 0 2px 0;
  font-size: 13.5px;
  line-height: 1.2;
  font-weight: 800;
  color: #ffffff;
}

.auto-quote-page .footer-main-row .footer-support-content p{
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}

.auto-quote-page .footer-main-row .footer-support-actions, .auto-quote-page .footer-main-row .footer-support-btn, .auto-quote-page .footer-main-row .footer-support-btn-outline{
  display: none !important;
}

.auto-quote-page .footer-main-row .footer-contact-block{
  text-align: center;
  transform: translateX(clamp(42px, 4.5vw, 80px));
}

.auto-quote-page .footer-main-row .footer-contact-title{
  justify-content: center;
}

.auto-quote-page .footer-main-row .footer-hours{
  text-align: center;
  margin: 5px auto 0;
}

@media (max-width: 1100px){
  .auto-quote-page .footer-main-row{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    min-height: 0;
  }

  .auto-quote-page .footer-main-row .footer-support-agent{
    position: static;
    transform: none;
    max-width: 100%;
    justify-content: center;
  }

  .auto-quote-page .footer-main-row .footer-support-content{
    text-align: left;
  }

  .auto-quote-page .footer-main-row .footer-contact-block{
    text-align: center;
    transform: none;
  }
}

@media (max-width: 640px){
  .auto-quote-page .footer-main-row .footer-support-agent{
    flex-direction: row;
    gap: 10px;
    padding: 0;
    margin: 0;
  }

  .auto-quote-page .footer-main-row .footer-support-avatar{
    width: 50px;
    height: 50px;
  }

  .auto-quote-page .footer-main-row .footer-support-content h3{
    font-size: 13px;
  }

  .auto-quote-page .footer-main-row .footer-support-content p{
    font-size: 10.5px;
  }
}

/* ===== Reference style Sonny footer layout ===== */
.auto-quote-page .form-footer{
  padding: 34px 24px 28px 24px;
  background: linear-gradient(rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.88));
}

.auto-quote-page .footer-reference-layout.footer-main-row{
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  text-align: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-agent{
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 620px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  padding: 0 !important;
  margin: 0 auto 2px auto !important;
  border: 0 !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
  min-width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  background: #111 !important;
  border: 2px solid #0abab5 !important;
  box-shadow: 0 0 0 2px rgba(18, 223, 209, 0.14), 0 10px 26px rgba(0, 0, 0, 0.28) !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
  max-width: 455px !important;
  text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content h3, .auto-quote-page .footer-reference-layout .footer-support-content > p:not(.footer-support-message){
  display: none !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message{
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-status-row{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-online{
  margin: 0 !important;
  display: inline-flex !important;
  position: relative !important;
  z-index: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  min-width: 96px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 2px solid #0abab5 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.auto-quote-page .footer-reference-layout .online-dot{
  width: 10px !important;
  height: 10px !important;
  background: #0abab5 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: onlineDotPulse 1.2s infinite ease-in-out !important;
  box-shadow: 0 0 0 rgba(34, 197, 94, 0.55) !important;
}

.auto-quote-page .footer-reference-layout .online-text{
  display: inline-block !important;
  color: #ffffff !important;
  animation: onlineTextBlink 1.1s infinite ease-in-out !important;
  letter-spacing: 0.4px !important;
}

.auto-quote-page .footer-reference-layout .footer-mini-icon{
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-mini-icon:hover{
  color: #0abab5 !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-block{
  width: 100% !important;
  text-align: center !important;
  transform: none !important;
  margin: 0 !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  margin: 0 0 3px 0 !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.15px !important;
  text-align: center !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-heading{
  display: inline-flex !important;
  align-items: center !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone i{
  font-size: 20px !important;
  color: #ffffff !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-separator{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 400 !important;
  margin: 0 6px !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
  margin: 2px auto 0 auto !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}

.auto-quote-page .footer-bottom-row{
  margin-top: 34px !important;
  padding-top: 23px !important;
}

@keyframes onlineDotPulse {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  70% {
    transform: scale(1.15);
    opacity: 0.95;
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes onlineTextBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.42;
  }
}

@media (max-width: 700px){
  .auto-quote-page .footer-reference-layout .footer-support-agent{
    gap: 14px !important;
    align-items: center !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 86px !important;
    height: 86px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-message{
    font-size: 18px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-phone{
    font-size: 17px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-hours{
    font-size: 12.5px !important;
  }
}

@media (max-width: 480px){
  .auto-quote-page .footer-reference-layout .footer-support-agent{
    flex-direction: column !important;
    text-align: center !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-content{
    text-align: center !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-status-row{
    justify-content: center !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-title{
    flex-direction: column !important;
    gap: 7px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-separator{
    display: none !important;
  }
}

/* ===== Final Sonny footer polish matching provided reference ===== */
.auto-quote-page .form-footer{
  background: #1f1f1f !important;
  padding: 34px 24px 28px 24px !important;
}

.auto-quote-page .footer-reference-layout.footer-main-row{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-agent{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
  width: 108px !important;
  height: 108px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 2px solid #0abab5 !important;
  background: #111 !important;
  box-shadow: 0 0 0 2px rgba(18, 223, 209, 0.14), 0 10px 26px rgba(0, 0, 0, 0.28) !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
  max-width: 430px !important;
  text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message{
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-status-row{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-online{
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  min-width: 92px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 2px solid #0abab5 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.auto-quote-page .footer-reference-layout .online-dot{
  width: 10px !important;
  height: 10px !important;
  background: #0abab5 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  animation: onlineDotPulse 1.2s infinite ease-in-out !important;
  box-shadow: 0 0 0 rgba(34, 197, 94, 0.55) !important;
}

.auto-quote-page .footer-reference-layout .online-text{
  color: #ffffff !important;
  display: inline-block !important;
  animation: onlineTextBlink 1.05s infinite ease-in-out !important;
  letter-spacing: 0.4px !important;
}

.auto-quote-page .footer-reference-layout .footer-mini-icon{
  color: #0abab5 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-block{
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  margin: 0 0 4px 0 !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.15px !important;
  text-align: center !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #ffffff !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone i{
  color: #ffffff !important;
  font-size: 20px !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-separator{
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 400 !important;
  margin: 0 6px !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
  margin: 2px auto 0 auto !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}

.auto-quote-page .footer-bottom-row{
  margin-top: 34px !important;
  padding-top: 23px !important;
  border-top-color: #0abab5 !important;
}

@media (max-width: 700px){
  .auto-quote-page .footer-reference-layout .footer-support-agent{
    gap: 14px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 86px !important;
    height: 86px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-message{
    font-size: 18px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-phone{
    font-size: 17px !important;
  }
}

@media (max-width: 480px){
  .auto-quote-page .footer-reference-layout .footer-support-agent{
    flex-direction: column !important;
    text-align: center !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-content, .auto-quote-page .footer-reference-layout .footer-support-status-row{
    text-align: center !important;
    justify-content: center !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-title{
    flex-direction: column !important;
    gap: 7px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-separator{
    display: none !important;
  }
}

/* Final user-requested footer adjustments */
.auto-quote-page .footer-reference-layout .footer-support-status-row{
  justify-content: center !important;
}
.auto-quote-page .footer-reference-layout .footer-phone-icon{
  order: 1 !important;
}
.auto-quote-page .footer-reference-layout .footer-support-online{
  order: 2 !important;
}
.auto-quote-page .footer-reference-layout .footer-whatsapp-icon{
  order: 3 !important;
}
@media (max-width: 480px){
  .auto-quote-page .footer-reference-layout .mobile-commercial-break{
    display: block !important;
  }
}

/* ===== Final footer alignment like latest reference ===== */
.auto-quote-page .form-footer{
    background: #1f1f1f !important;
    padding: 28px 24px 26px !important;
}

.auto-quote-page .footer-reference-layout.footer-main-row{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-agent{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
    flex: 0 0 auto !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: 2px solid #0abab5 !important;
    box-shadow: 0 0 0 2px rgba(18, 223, 209, 0.20) !important;
    background: #fff !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    max-width: 440px !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message{
    margin: 0 0 8px 0 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-status-row{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
}

.auto-quote-page .footer-reference-layout .footer-support-online{
    order: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 5px 13px !important;
    min-width: 96px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 2px solid #0abab5 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

.auto-quote-page .footer-reference-layout .online-dot{
    width: 10px !important;
    height: 10px !important;
    background: #0abab5 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: onlineDotPulse 1.2s infinite ease-in-out !important;
    box-shadow: 0 0 0 rgba(34, 197, 94, 0.55) !important;
}

.auto-quote-page .footer-reference-layout .online-text{
    display: inline-block !important;
    color: #ffffff !important;
    animation: onlineTextBlink 1.1s infinite ease-in-out !important;
    letter-spacing: 0.4px !important;
}

.auto-quote-page .footer-reference-layout .footer-mini-icon{
    color: #0abab5 !important;
    text-decoration: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-phone-icon{
    order: 2 !important;
}

.auto-quote-page .footer-reference-layout .footer-whatsapp-icon{
    order: 3 !important;
}

.auto-quote-page .footer-reference-layout .footer-mini-icon:hover{
    color: #ffffff !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-block{
    width: 100% !important;
    text-align: center !important;
    transform: none !important;
    margin: 2px auto 0 !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin: 0 0 3px 0 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.15px !important;
    text-align: center !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-heading{
    display: inline-flex !important;
    align-items: center !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone i{
    font-size: 21px !important;
    color: #ffffff !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
    margin: 2px auto 0 auto !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}

.auto-quote-page .footer-bottom-row{
    margin-top: 34px !important;
    padding-top: 23px !important;
}

@media (max-width: 700px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 94px !important;
        height: 94px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 18px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 18px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-hours{
        font-size: 12.5px !important;
    }
}

@media (max-width: 480px){
    .auto-quote-page .form-footer{
        padding: 24px 16px 24px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        gap: 12px !important;
        align-items: center !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 82px !important;
        height: 82px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-content{
        max-width: 235px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 16px !important;
        line-height: 1.08 !important;
    }

    .auto-quote-page .footer-reference-layout .mobile-commercial-break{
        display: block !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-online{
        min-width: 84px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-mini-icon{
        font-size: 20px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        gap: 6px 10px !important;
    }
}

/* ===== Final row alignment fix: top image row and contact row share same left edge ===== */
.auto-quote-page .footer-reference-layout.footer-main-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
    width: 560px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.auto-quote-page .footer-reference-layout .footer-support-agent{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
    align-items: flex-start !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-status-row{
    justify-content: flex-start !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-block{
    text-align: left !important;
    margin-top: 2px !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Mobile: keep commercial on next line */
@media (max-width: 480px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 100% !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        justify-content: center !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        justify-content: center !important;
        text-align: center !important;
    }

    .auto-quote-page .footer-reference-layout .mobile-commercial-break{
        display: block !important;
    }
}

/* ===== FINAL: end-aligned footer rows + sonny4 transparent/black avatar ===== */
.auto-quote-page .form-footer{
    background: #1f1f1f !important;
    padding: 28px 24px 26px !important;
}

.auto-quote-page .footer-reference-layout.footer-main-row{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: left !important;
}

/* Same visual box for both rows, so start and end line up */
.auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
    width: 620px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Top row */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    display: grid !important;
    grid-template-columns: 112px 1fr !important;
    column-gap: 18px !important;
    align-items: center !important;
    justify-content: stretch !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
    width: 112px !important;
    height: 112px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: 2px solid #0abab5 !important;
    box-shadow: 0 0 0 2px rgba(18, 223, 209, 0.20) !important;
    background-color: #1f1f1f !important;
    background: #1f1f1f !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message{
    width: 100% !important;
    max-width: 490px !important;
    margin: 0 0 8px 0 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-status-row{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-online{
    order: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 5px 13px !important;
    min-width: 96px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 2px solid #0abab5 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

.auto-quote-page .footer-reference-layout .footer-phone-icon{
    order: 2 !important;
}

.auto-quote-page .footer-reference-layout .footer-whatsapp-icon{
    order: 3 !important;
}

.auto-quote-page .footer-reference-layout .footer-mini-icon{
    color: #0abab5 !important;
    text-decoration: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Bottom contact row uses the exact same 620px box */
.auto-quote-page .footer-reference-layout .footer-contact-block{
    text-align: left !important;
    margin-top: 2px !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 0 3px 0 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.15px !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-heading{
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone i{
    font-size: 21px !important;
    color: #ffffff !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}

/* Footer bottom remains normal */
.auto-quote-page .footer-bottom-row{
    margin-top: 34px !important;
    padding-top: 23px !important;
}

/* Tablet */
@media (max-width: 700px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 520px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 94px 1fr !important;
        column-gap: 14px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 94px !important;
        height: 94px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 18px !important;
        max-width: 390px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 18px !important;
    }
}

/* Mobile */
@media (max-width: 480px){
    .auto-quote-page .form-footer{
        padding: 24px 16px 24px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 100% !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 82px 1fr !important;
        column-gap: 12px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 82px !important;
        height: 82px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.08 !important;
    }

    .auto-quote-page .footer-reference-layout .mobile-commercial-break{
        display: block !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-online{
        min-width: 84px !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-mini-icon{
        font-size: 20px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px 9px !important;
        font-size: 17px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 17px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-hours{
        font-size: 12.5px !important;
        text-align: center !important;
    }
}

/* ===== Final text alignment + forced two-line support message ===== */
.auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
    width: 620px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message br{
    display: block !important;
    content: "" !important;
}

.auto-quote-page .footer-reference-layout .footer-message-line2{
    display: inline-block !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-block{
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
    width: 100% !important;
    text-align: center !important;
}

@media (max-width: 700px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 520px !important;
    }
    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 18px !important;
    }
}

@media (max-width: 480px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 100% !important;
    }
    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 16px !important;
        line-height: 1.08 !important;
    }
    .auto-quote-page .footer-reference-layout .mobile-commercial-break{
        display: inline !important;
    }
}

/* ===== EXACT FINAL FOOTER ALIGNMENT =====
   Same total width for image/text row and number row.
   Bottom row starts at avatar-left and ends with top text line end area. */
.auto-quote-page .form-footer{
    background: #1f1f1f !important;
    padding: 28px 24px 26px !important;
}

.auto-quote-page .footer-reference-layout.footer-main-row{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    gap: 10px !important;
    text-align: left !important;
}

/* Shared alignment box */
.auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
    width: 560px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Top row: 112px image + 18px gap + 430px text = 560px total */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    display: grid !important;
    grid-template-columns: 112px 430px !important;
    column-gap: 18px !important;
    align-items: center !important;
    justify-content: start !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
    width: 112px !important;
    height: 112px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 112px !important;
    height: 112px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    border: 2px solid #0abab5 !important;
    background: #1f1f1f !important;
    box-shadow: 0 0 0 2px rgba(18, 223, 209, 0.18) !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
    width: 430px !important;
    max-width: 430px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message{
    width: 430px !important;
    max-width: 430px !important;
    margin: 0 0 8px 0 !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1.08 !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
    text-align: left !important;
    white-space: normal !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message br{
    display: block !important;
}

.auto-quote-page .footer-reference-layout .footer-message-line2{
    display: inline !important;
}

.auto-quote-page .footer-reference-layout .footer-support-status-row{
    display: flex !important;
    width: 430px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-online{
    order: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 5px 13px !important;
    min-width: 96px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 2px solid #0abab5 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

.auto-quote-page .footer-reference-layout .online-dot{
    width: 10px !important;
    height: 10px !important;
    background: #0abab5 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: onlineDotPulse 1.2s infinite ease-in-out !important;
}

.auto-quote-page .footer-reference-layout .online-text{
    color: #ffffff !important;
    animation: onlineTextBlink 1.1s infinite ease-in-out !important;
}

.auto-quote-page .footer-reference-layout .footer-phone-icon{
    order: 2 !important;
}

.auto-quote-page .footer-reference-layout .footer-whatsapp-icon{
    order: 3 !important;
}

.auto-quote-page .footer-reference-layout .footer-mini-icon{
    color: #0abab5 !important;
    text-decoration: none !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Bottom row: same 560px box, aligned from avatar-left */
.auto-quote-page .footer-reference-layout .footer-contact-block{
    text-align: left !important;
    margin-top: 0 !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
    width: 560px !important;
    max-width: 560px !important;
    margin: 0 0 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-heading{
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-phone i{
    font-size: 21px !important;
    color: #ffffff !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
    width: 560px !important;
    max-width: 560px !important;
    margin: 2px 0 0 0 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}

.auto-quote-page .footer-bottom-row{
    margin-top: 34px !important;
    padding-top: 23px !important;
}

/* Tablet */
@media (max-width: 700px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 500px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 94px 386px !important;
        column-gap: 20px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 94px !important;
        height: 94px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-content, .auto-quote-page .footer-reference-layout .footer-support-message, .auto-quote-page .footer-reference-layout .footer-support-status-row{
        width: 386px !important;
        max-width: 386px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message, .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 18px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-hours{
        width: 500px !important;
        max-width: 500px !important;
    }
}

/* Mobile */
@media (max-width: 480px){
    .auto-quote-page .form-footer{
        padding: 24px 16px 24px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 100% !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 82px minmax(0, 1fr) !important;
        column-gap: 12px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 82px !important;
        height: 82px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-content, .auto-quote-page .footer-reference-layout .footer-support-message, .auto-quote-page .footer-reference-layout .footer-support-status-row{
        width: 100% !important;
        max-width: 100% !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 16px !important;
        line-height: 1.08 !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px 9px !important;
        font-size: 17px !important;
        white-space: normal !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 17px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-hours{
        width: 100% !important;
        max-width: 100% !important;
        font-size: 12.5px !important;
        text-align: center !important;
    }
}

/* Slightly bigger round avatar */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    grid-template-columns: 120px 422px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
    width: 120px !important;
    height: 120px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 120px !important;
    height: 120px !important;
}

@media (max-width: 700px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 100px 380px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 100px !important;
        height: 100px !important;
    }
}

@media (max-width: 480px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 88px minmax(0, 1fr) !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 88px !important;
        height: 88px !important;
    }
}

/* ===== FINAL CENTER ALIGNMENT: equal left/right page gap ===== */
.auto-quote-page .form-footer{
    background: #1f1f1f !important;
    padding: 28px 24px 26px !important;
}

.auto-quote-page .footer-reference-layout.footer-main-row{
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Same centered box for both rows */
.auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
    width: min(620px, calc(100% - 32px)) !important;
    max-width: min(620px, calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Top row centered */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    column-gap: 18px !important;
    align-items: center !important;
    justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
    width: 120px !important;
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: #1f1f1f !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content{
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-message{
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-support-status-row{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* Bottom row perfectly centered */
.auto-quote-page .footer-reference-layout .footer-contact-block{
    text-align: center !important;
    margin-top: 0 !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
    margin-top: 2px !important;
    text-align: center !important;
}

/* Tablet */
@media (max-width: 700px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        width: min(540px, calc(100% - 24px)) !important;
        max-width: min(540px, calc(100% - 24px)) !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 100px 1fr !important;
        column-gap: 16px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 100px !important;
        height: 100px !important;
    }
}

/* Mobile */
@media (max-width: 480px){
    .auto-quote-page .form-footer{
        padding: 24px 16px 24px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 88px 1fr !important;
        column-gap: 12px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 88px !important;
        height: 88px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        flex-wrap: wrap !important;
        white-space: normal !important;
    }
}

/* ===== FINAL: align all footer rows and increase left-side gap ===== */
/* This shifts the complete Sonny/footer contact block slightly right on desktop,
   so image row, text row, number row, and timing stay aligned together. */
.auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
    transform: translateX(55px) !important;
}

/* Keep both rows using same visual width and alignment */
.auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
    width: min(620px, calc(100% - 32px)) !important;
    max-width: min(620px, calc(100% - 32px)) !important;
}

.auto-quote-page .footer-reference-layout .footer-support-agent{
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    column-gap: 18px !important;
    align-items: center !important;
    justify-content: start !important;
}

.auto-quote-page .footer-reference-layout .footer-support-content, .auto-quote-page .footer-reference-layout .footer-support-message, .auto-quote-page .footer-reference-layout .footer-support-status-row{
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-block{
    text-align: left !important;
}

.auto-quote-page .footer-reference-layout .footer-contact-title{
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}

.auto-quote-page .footer-reference-layout .footer-hours{
    width: min(620px, calc(100% - 32px)) !important;
    max-width: min(620px, calc(100% - 32px)) !important;
    text-align: center !important;
}

/* On tablet, shift less */
@media (max-width: 900px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        transform: translateX(28px) !important;
    }
}

/* On mobile, do not shift right to avoid overflow */
@media (max-width: 480px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        grid-template-columns: 88px 1fr !important;
        column-gap: 12px !important;
    }

    .auto-quote-page .footer-reference-layout .mobile-commercial-break{
        display: block !important;
    }
}

/* ===== ONLY HOURS LINE FIX ===== */
/* Sirf Hours wali line ko left move kiya hai.
   Baqi footer layout / image / Need line / phone line ko touch nahi kiya. */
.auto-quote-page .footer-reference-layout .footer-hours{
    position: relative !important;
    left: -76px !important;
    margin-top: 2px !important;
    text-align: center !important;
}

/* Mobile par hours ko normal center rakhna, warna screen se bahar ja sakta hai */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-hours{
        left: 0 !important;
        text-align: center !important;
    }
}

/* ===== SMALL AVATAR SIZE + 10PX GAP BETWEEN IMAGE AND QUESTION TEXT ===== */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    gap: 10px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 118px !important;
    height: 118px !important;
}

@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 90px !important;
        height: 90px !important;
    }
}

/* ===== MORE GAP BETWEEN ROUND IMAGE AND RIGHT TEXT ===== */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    gap: 22px !important;
    column-gap: 22px !important;
}

/* ===== SLIGHTLY BIGGER ROUND IMAGE ===== */
.auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 124px !important;
    height: 124px !important;
}

@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 94px !important;
        height: 94px !important;
    }
}

/* ===== MOBILE: keep Questions text exactly 2 lines and aligned ===== */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-support-content{
        text-align: left !important;
        align-items: flex-start !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        width: 260px !important;
        max-width: 260px !important;
        text-align: left !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message br{
        display: block !important;
    }

    .auto-quote-page .footer-reference-layout .mobile-commercial-break, .auto-quote-page .footer-reference-layout .footer-message-line2{
        display: block !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-support-message{
        width: 230px !important;
        max-width: 230px !important;
    }
}

/* ===== MOBILE: force Questions message into exactly 2 lines ===== */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        gap: 10px !important;
        column-gap: 10px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 88px !important;
        height: 88px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        width: auto !important;
        max-width: none !important;
        font-size: 13px !important;
        line-height: 1.12 !important;
        text-align: left !important;
        white-space: nowrap !important;
        margin-bottom: 7px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message br{
        display: block !important;
        content: "" !important;
    }

    .auto-quote-page .footer-reference-layout .footer-message-line2, .auto-quote-page .footer-reference-layout .mobile-commercial-break{
        display: inline !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 82px !important;
        height: 82px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-agent{
        gap: 8px !important;
        column-gap: 8px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 12px !important;
    }
}

@media (max-width: 340px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 76px !important;
        height: 76px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-message{
        font-size: 11px !important;
    }
}

/* ===== MOBILE ONLY: add slight left gap to image/text row ===== */
/* Laptop view untouched */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        padding-left: 14px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        padding-left: 10px !important;
    }
}

/* ===== MOBILE ONLY: Need line + phone on one line, aligned with upper row ===== */
/* Laptop / desktop view untouched */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-contact-block{
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        box-sizing: border-box !important;
        text-align: left !important;
        align-items: flex-start !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        text-align: left !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        margin: 0 0 4px 0 !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-heading{
        display: inline-flex !important;
        width: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-phone{
        display: inline-flex !important;
        width: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 4px !important;
        text-align: left !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        flex: 0 0 auto !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-phone i{
        font-size: 12px !important;
        margin-right: 2px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-hours{
        padding-left: 14px !important;
        text-align: left !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-contact-block{
        padding-left: 10px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 12px !important;
        gap: 5px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-phone i{
        font-size: 11px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-hours{
        padding-left: 10px !important;
    }
}

@media (max-width: 340px){
    .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 11px !important;
        gap: 4px !important;
    }
}

/* ===== MOBILE ONLY: move upper 2 rows slightly right ===== */
/* Laptop / desktop view untouched */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        transform: translateX(14px) !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block{
        transform: translateX(10px) !important;
    }
}

/* ===== MOBILE ONLY: align Need row + Hours row exactly with avatar row ===== */
/* Laptop / desktop view untouched */
@media (max-width: 640px){
    /* Common same box for avatar row, Need row, and Hours row */
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        width: calc(100% - 34px) !important;
        max-width: calc(100% - 34px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        transform: translateX(8px) !important;
        left: auto !important;
    }

    /* Avatar row stays same aligned box */
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        justify-content: flex-start !important;
    }

    /* Need + number row starts exactly where avatar row starts */
    .auto-quote-page .footer-reference-layout .footer-contact-block{
        text-align: left !important;
        align-items: flex-start !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        white-space: nowrap !important;
        margin: 0 0 4px 0 !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-heading, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        width: auto !important;
        display: inline-flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    /* Hours line starts from the same left edge and stays inside same right edge */
    .auto-quote-page .footer-reference-layout .footer-hours{
        display: block !important;
        text-align: left !important;
        margin-top: 4px !important;
        padding-left: 0 !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-support-agent, .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        transform: translateX(5px) !important;
    }
}

/* ===== MOBILE ONLY: align Need row and Hours row ===== */
/* Desktop / laptop view untouched */
@media (max-width: 640px){
    /* Same left edge for both rows */
    .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        width: calc(100% - 52px) !important;
        max-width: calc(100% - 52px) !important;
        margin-left: 34px !important;
        margin-right: 18px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
        left: auto !important;
        text-align: left !important;
    }

    /* Need + phone stays in one row */
    .auto-quote-page .footer-reference-layout .footer-contact-title{
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        margin: 0 0 4px 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-heading, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        display: inline-flex !important;
        width: auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-phone{
        gap: 4px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-phone i{
        font-size: 11px !important;
        margin-right: 1px !important;
    }

    /* Hours starts exactly from same left edge as Need row */
    .auto-quote-page .footer-reference-layout .footer-hours{
        display: block !important;
        margin-top: 4px !important;
        white-space: nowrap !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        margin-left: 26px !important;
        margin-right: 14px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-heading, .auto-quote-page .footer-reference-layout .footer-contact-phone{
        font-size: 11px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-hours{
        font-size: 9.8px !important;
    }
}

/* ===== MOBILE ONLY: move Need to talk row slightly right ===== */
/* Laptop / desktop untouched */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-contact-title{
        transform: translateX(10px) !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-contact-title{
        transform: translateX(7px) !important;
    }
}

/* ===== MOBILE ONLY: move Need to talk row more right ===== */
/* Laptop / desktop untouched */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-contact-title{
        transform: translateX(20px) !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-contact-title{
        transform: translateX(14px) !important;
    }
}

/* ===== MOBILE ONLY: adjust Need row slightly left ===== */
/* Laptop / desktop untouched */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-contact-title{
        transform: translateX(16px) !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-contact-title{
        transform: translateX(11px) !important;
    }
}

/* ===== MOBILE ONLY: move Hours line to left ===== */
/* Laptop / desktop untouched */
@media (max-width: 640px){
    .auto-quote-page .footer-reference-layout .footer-hours{
        margin-left: 19px !important;
        margin-right: auto !important;
        transform: none !important;
        left: auto !important;
        text-align: left !important;
        white-space: nowrap !important;
        width: max-content !important;
        max-width: none !important;
    }
}

@media (max-width: 380px){
    .auto-quote-page .footer-reference-layout .footer-hours{
        margin-left: 8px !important;
    }
}

/* ===== LAPTOP/DESKTOP ONLY: move Hours line left ===== */
/* Mobile view untouched */
@media (min-width: 641px){
    .auto-quote-page .footer-reference-layout .footer-hours{
        position: relative !important;
        left: -100px !important;
        margin-top: 2px !important;
        text-align: center !important;
    }
}

/* ===== FINAL RESPONSIVE FOOTER CENTERING FIX (tablet + mobile only) ===== */
/* Desktop/laptop stays as it is. This block only cleans the footer below 900px. */
@media (max-width: 900px){
  .auto-quote-page .form-footer{
    padding: 28px 16px 24px !important;
    overflow-x: hidden !important;
  }

  .auto-quote-page .footer-container, .auto-quote-page .footer-reference-layout.footer-main-row{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    transform: none !important;
    left: auto !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-agent{
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: left !important;
    transform: none !important;
    left: auto !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-content{
    width: auto !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    transform: none !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-message{
    margin: 0 0 7px 0 !important;
    font-size: 18px !important;
    line-height: 1.12 !important;
    text-align: left !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-status-row{
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
    transform: none !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-online{
    min-width: 86px !important;
    padding: 5px 11px !important;
    font-size: 11.5px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-block, .auto-quote-page .footer-reference-layout .footer-hours{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    transform: none !important;
    left: auto !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-title{
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px auto 4px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px 10px !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-heading, .auto-quote-page .footer-reference-layout .footer-contact-phone{
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-phone{
    gap: 6px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-phone i{
    font-size: 16px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-hours{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 3px !important;
    white-space: normal !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .auto-quote-page .footer-bottom-row{
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 520px){
  .auto-quote-page .form-footer{
    padding: 24px 14px 22px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-agent{
    max-width: 330px !important;
    gap: 10px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-content{
    max-width: 240px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-message{
    font-size: 14.8px !important;
    line-height: 1.12 !important;
    margin-bottom: 6px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-online{
    min-width: 78px !important;
    padding: 4px 9px !important;
    font-size: 10.5px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-mini-icon{
    font-size: 18px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-title{
    flex-direction: column !important;
    gap: 5px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-heading, .auto-quote-page .footer-reference-layout .footer-contact-phone{
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-phone i{
    font-size: 14px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-hours{
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 360px){
  .auto-quote-page .footer-reference-layout .footer-support-agent{
    max-width: 300px !important;
    gap: 8px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-content{
    max-width: 220px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-support-message{
    font-size: 13.8px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-contact-title, .auto-quote-page .footer-reference-layout .footer-contact-heading, .auto-quote-page .footer-reference-layout .footer-contact-phone{
    font-size: 15px !important;
  }

  .auto-quote-page .footer-reference-layout .footer-hours{
    font-size: 10.8px !important;
  }
}

/* ===== FINAL USER REQUEST: smaller footer avatar ===== */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    grid-template-columns: 92px 1fr !important;
    column-gap: 16px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
}

@media (max-width: 900px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }
}

@media (max-width: 520px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
}

@media (max-width: 360px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
}

/* ===== FINAL USER REQUEST: even smaller footer avatar + mobile gap above contact row ===== */
.auto-quote-page .footer-reference-layout .footer-support-agent{
    grid-template-columns: 82px 1fr !important;
    column-gap: 14px !important;
}

.auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
}

@media (max-width: 900px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
    }
}

@media (max-width: 520px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        gap: 9px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-block{
        margin-top: 14px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-title{
        margin-top: 12px !important;
    }
}

@media (max-width: 360px){
    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap, .auto-quote-page .footer-reference-layout .footer-support-avatar{
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-contact-block{
        margin-top: 16px !important;
    }
}

/* ===== FINAL USER REQUEST: keep avatar size, add a little gap below avatar/support row ===== */
@media (max-width: 520px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        margin-bottom: 10px !important;
    }

    .auto-quote-page .footer-reference-layout .footer-support-avatar-wrap{
        margin-bottom: 6px !important;
    }
}

@media (max-width: 360px){
    .auto-quote-page .footer-reference-layout .footer-support-agent{
        margin-bottom: 12px !important;
    }
}
body.auto-quote-page{
  --red: #e60000;
  --accent: #0abab5;
  --accent-dark: #089895;
  --text: #26352f;
  --muted: #5b675f;
  --line: #cfd9d5;
  --soft-line: #e2e8e5;
  --field: #ffffff;
  --disabled: #f0f2f1;
  --shadow: rgba(0, 0, 0, 0.18);
}

.auto-quote-page *{ box-sizing: border-box; }

body.auto-quote-page{ scroll-behavior: smooth; }

body.auto-quote-page{
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

.auto-quote-page .quote-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 66px;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auto-quote-page .quote-title{
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.1px;
}





















.auto-quote-page .quote-main{ background: #fff; min-height: 560px; }
.auto-quote-page .quote-form{ margin: 0; width: 100%; }

.auto-quote-page .quote-step{
  display: none;
  min-height: 540px;
  padding: 48px 18px 56px;
}

.auto-quote-page .quote-step.is-active{
  display: block;
  animation: stepFade .16s ease;
}

@keyframes stepFade {
  from { opacity: .45; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.auto-quote-page .step-shell{
  width: 100%;
  max-width: 575px;
  margin: 0 auto;
  text-align: left;
}

.auto-quote-page .start-shell{ max-width: 610px; }
.auto-quote-page .use-shell{ max-width: 560px; }
.auto-quote-page .coverage-shell{ max-width: 560px; }
.auto-quote-page .savings-shell{ max-width: 700px; }

.auto-quote-page .step-shell h1, .auto-quote-page .step-shell h2{
  margin: 0 0 26px;
  color: var(--text);
  text-align: center;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.7px;
}

.auto-quote-page .step-shell h1{ font-size: 36px; }
.auto-quote-page .step-shell h2{ font-size: 34px; }

.auto-quote-page .subtitle{
  margin: -12px auto 34px;
  color: #23332d;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.auto-quote-page .didyouknow{
  margin: 0 auto 10px;
  text-align: center;
  color: #26352f;
  font-size: 15px;
  font-weight: 500;
}

.auto-quote-page .province-link{
  display: block;
  width: fit-content;
  margin: 0 auto 34px;
  color: var(--accent-dark);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
}

.auto-quote-page .province-link::after{
  content: " ›";
  font-size: 18px;
}

.auto-quote-page .intro-copy{
  max-width: 540px;
  margin: 0 auto 28px;
  color: #2e3b36;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.52;
}

.auto-quote-page .field-group{ margin: 0 0 25px; }

.auto-quote-page .field-group label, .auto-quote-page .standalone-label, .auto-quote-page .question-row label{
  display: block;
  color: #17241f;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}

.auto-quote-page select, .auto-quote-page input[type="text"], .auto-quote-page input[type="tel"], .auto-quote-page input[type="number"]{
  width: 100%;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--field);
  color: #222;
  font: inherit;
  font-size: 16px;
  padding: 0 18px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.auto-quote-page select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7f8883 50%),
    linear-gradient(135deg, #7f8883 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 21px,
    calc(100% - 15px) 21px;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 48px;
}

.auto-quote-page select:focus, .auto-quote-page input[type="text"]:focus, .auto-quote-page input[type="tel"]:focus, .auto-quote-page input[type="number"]:focus{
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.auto-quote-page .segmented{
  width: 100%;
  display: grid;
  border: 1px solid var(--accent);
  background: #fff;
  margin: 0 0 34px;
  min-height: 49px;
}

.auto-quote-page .segmented.two{ grid-template-columns: repeat(2, 1fr); }
.auto-quote-page .segmented.three{ grid-template-columns: repeat(3, 1fr); }

.auto-quote-page .segmented label{
  display: flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-right: 1px solid rgba(10, 186, 181, .65);
  cursor: pointer;
  color: #17241f;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.auto-quote-page .segmented label:last-child{ border-right: 0; }
.auto-quote-page .segmented input{ position: absolute; opacity: 0; pointer-events: none; }
.auto-quote-page .segmented span{
  width: 100%;
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  transition: background .15s ease, color .15s ease;
}
.auto-quote-page .segmented input:checked + span{
  background: var(--accent);
  color: #fff;
}

.auto-quote-page .ownership span{ min-height: 66px; }
.auto-quote-page .ownership label{ min-height: 66px; }

.auto-quote-page .ownership span br{ content: ""; }

.auto-quote-page .question-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.auto-quote-page .question-row label{ flex: 1; margin-bottom: 0; }
.auto-quote-page .stacked-question{ margin-top: 18px; }
.auto-quote-page .commute-row{ margin-top: 38px; }
.auto-quote-page .saving-question{ align-items: flex-start; margin-bottom: 18px; }
.auto-quote-page .saving-question label{ font-weight: 600; line-height: 1.45; }

.auto-quote-page .help-icon{
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.auto-quote-page .field-spacer{ height: 16px; }
.auto-quote-page .date-title{
  font-size: 16px;
  font-weight: 700;
  color: #18241f;
  margin: 36px 0 10px;
}

.auto-quote-page .date-row{
  display: grid;
  gap: 14px;
}
.auto-quote-page .date-row.two-cols{ grid-template-columns: 1fr 1fr; }
.auto-quote-page .date-row.three-cols{ grid-template-columns: repeat(3, 1fr); }
.auto-quote-page .coverage-date{ margin-top: 24px; }

.auto-quote-page .radio-card-list{
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
}

.auto-quote-page .radio-card{
  position: relative;
  min-height: 67px;
  border: 1px solid rgba(10, 186, 181, .72);
  background: #fff;
  color: #18241f;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.auto-quote-page .radio-card input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auto-quote-page .radio-card span{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
  min-height: 67px;
  padding: 18px 22px 18px 70px;
  font-weight: 600;
}
@media (max-width:768px){

  .auto-quote-page .radio-card{
    text-align: left !important;
  }

  .auto-quote-page .radio-card span{
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 70px !important;
  }
}
@media (max-width:768px){

  .auto-quote-page .radio-card{
    width: 100% !important;
    min-height: 78px !important;
  }

  .auto-quote-page .radio-card span{
    min-height: 78px !important;
    padding: 18px 20px 18px 62px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .auto-quote-page .radio-card span::before{
    left: 22px !important;
    width: 24px !important;
    height: 24px !important;
  }
}

.auto-quote-page .radio-card span::before{
  content: "";
  position: absolute;
  left: 30px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #9faaa5;
  background: #fff;
}

.auto-quote-page .radio-card input:checked + span{
  background: rgba(10, 186, 181, .09);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.auto-quote-page .radio-card input:checked + span::before{
  border-color: var(--accent);
  box-shadow: inset 0 0 0 5px #fff;
  background: var(--accent);
}

.auto-quote-page .compact-cards .radio-card, .auto-quote-page .compact-cards .radio-card span{ min-height: 62px; }

.auto-quote-page .field-note-main{
  margin: 30px 0 18px;
  color: #26352f;
  font-weight: 600;
  line-height: 1.48;
}

.auto-quote-page .progressive-field, .auto-quote-page .progressive-block{
  display: none;
}
.auto-quote-page .progressive-field.is-visible, .auto-quote-page .progressive-block.is-visible{
  display: block;
}

.auto-quote-page .saving-card{
  border: 1px solid #d7dfdc;
  background: #fff;
  padding: 38px 56px 42px;
  margin: 0 auto 30px;
  text-align: center;
}

.auto-quote-page .saving-icon{
  color: var(--accent-dark);
  font-size: 30px;
  margin-bottom: 12px;
}

.auto-quote-page .saving-card h3{
  margin: 0 0 22px;
  color: var(--text);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 500;
}

.auto-quote-page .saving-card .segmented{ margin-bottom: 0; }

.auto-quote-page .km-input{
  display: flex;
  width: 100%;
  max-width: 260px;
  height: 50px;
  border: 1px solid var(--line);
  background: #fff;
}

.auto-quote-page .km-input input{
  border: 0;
  width: 50%;
  height: 48px;
  box-shadow: none !important;
}

.auto-quote-page .km-input span{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--line);
  color: #66716c;
  background: #f8faf9;
  font-weight: 600;
}

.auto-quote-page .purchase-fields .field-group label{
  min-height: 46px;
  line-height: 1.35;
}

.auto-quote-page .small-top{ margin-top: 28px; }

.auto-quote-page .under-label{
  margin: -4px 0 16px;
  color: #283631;
  font-size: 14px;
  font-weight: 600;
}

.auto-quote-page .driver-shell{ max-width: 620px; }
.auto-quote-page .driver-choice{ margin-bottom: 28px; }

.auto-quote-page .driver-panel{
  animation: stepFade .16s ease;
}


.auto-quote-page .example-note{
  margin: -8px 0 28px;
  color: #26352f;
  font-size: 15px;
  font-weight: 600;
}

.auto-quote-page .province-note{
  margin: 0 0 6px;
  color: #33423d;
  font-size: 15px;
  font-weight: 600;
}

.auto-quote-page .change-province-link{
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.auto-quote-page .change-province-link::after{
  content: " ›";
}

.auto-quote-page .add-preferred{
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  margin: -4px 0 22px;
}

.auto-quote-page .secure-note{
  margin: 18px 0 0;
  padding: 12px 14px;
  background: rgba(10, 186, 181, .08);
  color: #29413a;
  font-size: 14px;
  font-weight: 700;
  border-left: 4px solid var(--accent);
}


.auto-quote-page .form-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: min(760px, calc(100% - 36px));
  margin: 0 auto;
  padding: 34px 0 52px;
}

.auto-quote-page .btn{
  min-height: 50px;
  border: 1px solid var(--accent);
  border-radius: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.auto-quote-page .btn-back{
  background: #fff;
  color: var(--accent-dark);
}

.auto-quote-page .btn-next{
  background: var(--accent);
  color: #fff;
}

.auto-quote-page .btn:disabled{
  cursor: not-allowed;
  border-color: #e4e8e6;
  background: #f4f5f5;
  color: #c6cecb;
}

.auto-quote-page .quote-contact-strip{
  background: var(--accent-dark);
  color: #fff;
  padding: 52px 18px 58px;
  text-align: center;
}
.auto-quote-page .quote-contact-strip h2{
  margin: 0 0 8px;
  font-size: 31px;
  font-weight: 500;
}
.auto-quote-page .quote-contact-strip p{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.auto-quote-page .help-popup{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.auto-quote-page .help-popup[hidden]{ display: none; }
.auto-quote-page .help-box{
  width: min(480px, 100%);
  background: var(--accent);
  color: #fff;
  border-radius: 18px;
  padding: 34px 34px 32px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
  position: relative;
  text-align: left;
}
.auto-quote-page .help-box h3{
  color: #fff;
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 800;
}
.auto-quote-page .help-box p{
  color: #fff;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}
.auto-quote-page .help-close{
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 720px){
  .auto-quote-page .quote-topbar{ height: 58px; }
  
  
  
  
  .auto-quote-page .quote-step{ padding: 34px 16px 42px; min-height: 500px; }
  .auto-quote-page .step-shell h1{ font-size: 28px; }
  .auto-quote-page .step-shell h2{ font-size: 28px; }
  .auto-quote-page .intro-copy{ margin-top: 26px; }
  .auto-quote-page .date-row.two-cols, .auto-quote-page .date-row.three-cols, .auto-quote-page .form-actions{ grid-template-columns: 1fr; }
  .auto-quote-page .segmented.three{ grid-template-columns: 1fr; }
  .auto-quote-page .segmented label{ border-right: 0; border-bottom: 1px solid rgba(10, 186, 181, .65); }
  .auto-quote-page .segmented label:last-child{ border-bottom: 0; }
  .auto-quote-page .saving-card{ padding: 30px 18px 32px; }
  .auto-quote-page .saving-card h3{ font-size: 23px; }
  .auto-quote-page .km-input{ max-width: 100%; }
  .auto-quote-page .purchase-fields .field-group label{ min-height: 0; }
  .auto-quote-page .quote-contact-strip h2{ font-size: 25px; }
}

.auto-quote-page .driver-copy{
  margin: 0 0 18px;
  color: #26352f;
  font-size: 16px;
  line-height: 1.5;
}

.auto-quote-page .example-note{
  margin: -10px 0 28px;
  color: #26352f;
  font-size: 14px;
  font-weight: 600;
}

.auto-quote-page .province-note{
  margin: 0 0 4px;
  color: #2d3a35;
  font-size: 15px;
}

.auto-quote-page .bottom-link{
  margin-top: 0;
}


.auto-quote-page .quote-orig-header{position:sticky;top:0;z-index:60;}


.auto-quote-page .quote-topbar, .auto-quote-page .quote-title, .auto-quote-page .quote-contact-strip{display:none;}
.auto-quote-page .didyouknow, .auto-quote-page .province-link, .auto-quote-page .province-note{display:none !important;}
.auto-quote-page .step-shell h1{font-size:40px;}
.auto-quote-page .driver-copy{margin:8px 0 18px;}
.auto-quote-page .form-footer{margin-top:0;}

.auto-quote-page .compact-help-row{
  margin: 0 0 10px;
  align-items: center;
}
.auto-quote-page .compact-help-row label{
  margin: 0;
}
.auto-quote-page .standalone-question-row{
  margin-top: 8px;
}
.auto-quote-page .standalone-question-row .standalone-label, .auto-quote-page .date-title-row .date-title{
  margin: 0;
}
.auto-quote-page .date-title-row{
  margin: 18px 0 10px;
}
.auto-quote-page .field-note-row{
  margin: 30px 0 18px;
  align-items: flex-start;
}
.auto-quote-page .field-note-row .field-note-main{
  margin: 0;
  flex: 1;
}

/* First step should show one centered button, like the reference video/form */
.auto-quote-page .form-actions.is-single{
  grid-template-columns: minmax(260px, 490px);
  justify-content: center;
}

.auto-quote-page .form-actions.is-single .btn-next{
  width: 100%;
}

.auto-quote-page .form-actions.is-single .btn-back{
  display: none !important;
}

/* requested cleanup: no separator line before navigation button */
.auto-quote-page .quote-step{ border-bottom: 0 !important; }

/* first step: one centered button exactly like the reference */
.auto-quote-page .form-actions.is-single{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.auto-quote-page .form-actions.is-single .btn-next{
  width: min(490px, calc(100vw - 40px)) !important;
  margin: 0 auto !important;
}
.auto-quote-page .form-actions.is-single .btn-back{ display: none !important; }

/* ===== FINAL TIGHT GAP FIX (2026-07-06) =====
   Removes the large blank area between active step inputs and navigation buttons. */
body.auto-quote-page .quote-step, body.auto-quote-page .quote-step.is-active{
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

body.auto-quote-page .quote-step.is-active .step-shell{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.auto-quote-page .quote-step.is-active ~ .form-actions{
  margin-top: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 34px !important;
}

body.auto-quote-page .quote-step.is-active[data-step="4"]{
  padding-bottom: 0 !important;
}

body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-date, body.auto-quote-page .quote-step.is-active[data-step="4"] .field-group{
  margin-bottom: 0 !important;
}

body.auto-quote-page .quote-step.is-active[data-step="4"] ~ .form-actions{
  padding-top: 6px !important;
}

/* Keep Back and Next equal width while keeping the overall form slightly narrower. */
body.auto-quote-page .step-shell, body.auto-quote-page .start-shell, body.auto-quote-page .use-shell, body.auto-quote-page .coverage-shell, body.auto-quote-page .driver-shell{
  max-width: 520px !important;
}

body.auto-quote-page .form-actions:not(.is-single){
  width: min(520px, calc(100vw - 48px)) !important;
  max-width: 520px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

body.auto-quote-page .form-actions:not(.is-single) .btn{
  width: 100% !important;
}

body.auto-quote-page .form-actions.is-single{
  width: min(520px, calc(100vw - 48px)) !important;
  max-width: 520px !important;
  padding-top: 8px !important;
}

body.auto-quote-page .form-actions.is-single .btn-next{
  width: 100% !important;
  max-width: 520px !important;
}

/* ===== COVERAGE STEP GAP MATCH TO SCREENSHOT =====
   Keeps a moderate, clean gap between the date inputs and Back/Next buttons. */
body.auto-quote-page .quote-step.is-active[data-step="4"]{
  padding-bottom: 56px !important;
  border-bottom: 1px solid #d9dfdc !important;
}

body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-date{
  margin-bottom: 0 !important;
}

body.auto-quote-page .quote-step.is-active[data-step="4"] ~ .form-actions{
  padding-top: 42px !important;
  padding-bottom: 44px !important;
}

body.auto-quote-page .form-actions:not(.is-single){
  width: min(520px, calc(100vw - 48px)) !important;
  max-width: 520px !important;
  grid-template-columns: 1fr 1fr !important;
}

body.auto-quote-page .form-actions:not(.is-single) .btn{
  width: 100% !important;
}


/* Final fix: keep current spacing, remove the grey separator line above Back/Next buttons */
.auto-quote-page .quote-step, .auto-quote-page .quote-step.is-active{
  border-bottom: 0 !important;
}


/* Ways to Save step added after Coverage Start Date */
.auto-quote-page .savings-video-shell{
  max-width: 560px;
}

.auto-quote-page .savings-video-shell .subtitle{
  margin-bottom: 40px;
}

.auto-quote-page .saving-question-block{
  margin: 0 0 26px;
}

.auto-quote-page .saving-question-block .question-row{
  align-items: flex-start;
  margin-bottom: 16px;
}

.auto-quote-page .saving-question-block .question-row label{
  font-weight: 500;
  line-height: 1.42;
  font-size: 17px;
}

.auto-quote-page .saving-question-block .segmented{
  margin-bottom: 0;
}



.auto-quote-page .savings-step .form-actions, .auto-quote-page .savings-video-shell + .form-actions{
  margin-top: 0;
}

@media (max-width: 720px){
  .auto-quote-page .savings-video-shell{
    max-width: 100%;
  }
}


/* Driver step: Use your information panel */
.auto-quote-page .driver-info-panel{
  margin-top: 58px;
}

.auto-quote-page .driver-section-heading{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 34px 0 22px;
  text-align: center;
}

.auto-quote-page .driver-section-heading h3{
  margin: 0;
  color: #15241e;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 500;
}

.auto-quote-page .driver-info-panel .field-group{
  margin-bottom: 26px;
}

.auto-quote-page .driver-info-panel .field-group label{
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}

.auto-quote-page .driver-info-panel input[type="text"], .auto-quote-page .driver-info-panel select{
  height: 52px;
  border: 1px solid #cfd9d5;
  background-color: #fff;
}

.auto-quote-page .driver-info-panel input[type="text"]:focus, .auto-quote-page .driver-info-panel select:focus{
  border-color: #0abab5;
  box-shadow: inset 0 -2px 0 #0abab5;
}

.auto-quote-page .driver-info-panel input.has-error{
  border-bottom-color: #c60000 !important;
  box-shadow: inset 0 -3px 0 #c60000 !important;
}

.auto-quote-page .field-error{
  margin: 10px 0 0;
  color: #c60000;
  font-size: 15px;
  line-height: 1.35;
}

.auto-quote-page .add-preferred{
  width: 100%;
  height: 50px;
  border: 1px solid #0abab5;
  background: #fff;
  color: #0abab5;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  margin: 16px 0 28px;
}

.auto-quote-page .add-preferred span{
  font-weight: 800;
  font-size: 22px;
  margin-right: 8px;
}

.auto-quote-page .date-heading{
  margin-top: 28px;
}

.auto-quote-page .driver-date-row{
  margin-bottom: 40px;
}

.auto-quote-page .driver-segment{
  margin-bottom: 40px;
}

.auto-quote-page .driver-secure-note{
  margin: 8px 0 18px;
  padding: 24px 26px;
  background: #eefdfc;
  border-left: 0;
  color: #1f3434;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
}

.auto-quote-page .driver-secure-note a{
  color: #0abab5;
  text-decoration: underline;
}

@media (max-width: 720px){
  .auto-quote-page .driver-info-panel{
    margin-top: 36px;
  }

  .auto-quote-page .driver-section-heading h3{
    font-size: 22px;
  }
}


/* Address step after Driver */
.auto-quote-page .address-shell{
  max-width: 560px;
}

.auto-quote-page .address-step h2{
  margin-bottom: 56px;
}

.auto-quote-page .address-shell .field-group{
  margin-bottom: 28px;
}

.auto-quote-page .address-shell .field-group label{
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.auto-quote-page .address-shell input[type="text"]{
  height: 52px;
  border: 1px solid #cfd9d5;
  background: #fff;
  color: #1b2b25;
}

.auto-quote-page .address-shell input[type="text"]:disabled{
  background: #f0f0f0;
  color: #777;
  cursor: not-allowed;
}

.auto-quote-page .address-shell input.has-error{
  border-bottom-color: #c60000 !important;
  box-shadow: inset 0 -3px 0 #c60000 !important;
}

.auto-quote-page .address-error{
  margin-top: 10px;
}

.auto-quote-page .address-small-row{
  gap: 40px;
  margin-bottom: 42px;
}

.auto-quote-page .address-quote-question{
  margin-top: 26px;
}

.auto-quote-page .address-quote-question p{
  margin: 0 0 18px;
  color: #1f302a;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
}

.auto-quote-page .address-choice span{
  min-height: 64px;
  line-height: 1.25;
}

.auto-quote-page .address-consent-box{
  margin: 38px 0 20px;
  padding: 26px 28px;
  background: #eefdfc;
  color: #1f3434;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 720px){
  .auto-quote-page .address-step h2{
    margin-bottom: 36px;
  }

  .auto-quote-page .address-small-row{
    gap: 14px;
  }
}


/* Driver license step */
.auto-quote-page .license-shell{
  max-width: 560px;
}

.auto-quote-page .license-step h2{
  margin-bottom: 56px;
}

.auto-quote-page .license-question-block{
  margin: 0 0 46px;
}

.auto-quote-page .license-question-block .question-row{
  align-items: flex-start;
  margin-bottom: 18px;
}

.auto-quote-page .license-question-block .question-row label{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.auto-quote-page .license-question-block .segmented{
  margin-bottom: 0;
}

.auto-quote-page .license-class-choice{
  margin-top: 0;
}

.auto-quote-page .save-quote-link{
  display: block;
  width: fit-content;
  margin: -24px auto 38px;
  color: #0abab5;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.auto-quote-page .save-quote-link:hover{
  text-decoration: underline;
}

@media (max-width: 720px){
  .auto-quote-page .license-step h2{
    margin-bottom: 38px;
  }

  .auto-quote-page .save-quote-link{
    margin-top: -12px;
  }
}


/* G2 age conditional field */
.auto-quote-page .license-age-field{
  margin-top: 34px;
  margin-bottom: 0;
}

.auto-quote-page .license-age-field label{
  display: block;
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.auto-quote-page .license-age-field input[type="number"]{
  width: 100%;
  height: 52px;
  border: 1px solid #cfd9d5;
  background: #fff;
  color: #1b2b25;
  font: inherit;
  padding: 0 18px;
  outline: none;
}

.auto-quote-page .license-age-field input[type="number"]:focus{
  border-color: #0abab5;
  box-shadow: inset 0 -2px 0 #0abab5;
}


/* G2 license month dropdown */
.auto-quote-page .license-month-field{
  margin-top: 34px;
  margin-bottom: 0;
}

.auto-quote-page .license-month-field label{
  display: block;
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 14px;
}

.auto-quote-page .license-month-field select{
  width: 100%;
  height: 52px;
  border: 1px solid #cfd9d5;
  background-color: #fff;
  color: #1b2b25;
  font: inherit;
  padding: 0 18px;
  outline: none;
}

.auto-quote-page .license-month-field select:focus{
  border-color: #0abab5;
  box-shadow: inset 0 -2px 0 #0abab5;
}


/* Driver License History step */
.auto-quote-page .license-history-shell{
  max-width: 560px;
}

.auto-quote-page .license-history-step h2{
  margin-bottom: 56px;
}

.auto-quote-page .license-history-question-block{
  margin: 0 0 32px;
}

.auto-quote-page .license-history-question-block .question-row{
  margin-bottom: 18px;
  align-items: flex-start;
}

.auto-quote-page .license-history-question-block .question-row label{
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.auto-quote-page .license-history-question-block .segmented{
  margin-bottom: 0;
}

.auto-quote-page .license-history-age-field{
  margin-top: 28px;
  margin-bottom: 0;
}

.auto-quote-page .license-history-age-field label{
  display: block;
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}

.auto-quote-page .license-history-age-field input[type="number"]{
  width: 100%;
  height: 52px;
  border: 1px solid #cfd9d5;
  background: #fff;
  color: #1b2b25;
  font: inherit;
  padding: 0 18px;
  outline: none;
}

.auto-quote-page .license-history-age-field input[type="number"]:focus{
  border-color: #0abab5;
  box-shadow: inset 0 -2px 0 #0abab5;
}

@media (max-width: 720px){
  .auto-quote-page .license-history-step h2{
    margin-bottom: 38px;
  }
}


/* Driving History step */
.auto-quote-page .driving-history-shell{
  max-width: 620px;
}

.auto-quote-page .driving-history-step h2{
  margin-bottom: 52px;
}

.auto-quote-page .driving-question-block{
  margin: 0 0 34px;
}

.auto-quote-page .driving-question-block .question-row{
  align-items: flex-start;
  margin-bottom: 18px;
}

.auto-quote-page .driving-question-block .question-row label{
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.auto-quote-page .driving-question-block .segmented{
  margin-bottom: 0;
}

.auto-quote-page .suspension-question{
  margin-top: 48px;
}

.auto-quote-page .history-card{
  position: relative;
  width: min(1000px, calc(100vw - 120px));
  margin: 38px 50% 34px;
  transform: translateX(-50%);
  background: #eefdfc;
  padding: 42px min(180px, 18vw) 58px;
}

.auto-quote-page .history-card h3{
  margin: 0 0 28px;
  color: #0a5f5d;
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
}

.auto-quote-page .history-card-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  border: 1px solid #0abab5;
  background: transparent;
  color: #0abab5;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
}

.auto-quote-page .history-card .field-group{
  margin-bottom: 28px;
}

.auto-quote-page .history-card .field-group label, .auto-quote-page .history-card-label{
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.auto-quote-page .history-card select{
  height: 52px;
  border: 1px solid #cfd9d5;
  background-color: #fff;
}

.auto-quote-page .history-card-label{
  margin: 26px 0 16px;
}

.auto-quote-page .history-date-row{
  gap: 18px;
  max-width: 100%;
}

.auto-quote-page .history-add-btn{
  width: 100%;
  height: 54px;
  border: 1px solid #0abab5;
  background: #fff;
  color: #0abab5;
  font: inherit;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  margin: 0 0 42px;
}

.auto-quote-page .history-add-btn:hover{
  background: #e9fbfa;
}

@media (max-width: 900px){
  .auto-quote-page .history-card{
    width: min(760px, calc(100vw - 40px));
    padding: 34px 28px 44px;
  }
}

@media (max-width: 720px){
  .auto-quote-page .driving-history-step h2{
    margin-bottom: 36px;
  }

  .auto-quote-page .history-card{
    width: calc(100vw - 28px);
    padding: 32px 18px 38px;
  }
}


/* Final requested fixes: no green accents, light Tiffany dynamic cards */
body.auto-quote-page{
  --accent: #0abab5;
  --accent-dark: #089895;
}

.auto-quote-page .segmented{
  border-color: #0abab5 !important;
}

.auto-quote-page .segmented label{
  border-color: rgba(10, 186, 181, .65) !important;
}

.auto-quote-page .segmented input:checked + span, .auto-quote-page .btn-next{
  background: #0abab5 !important;
  color: #fff !important;
}

.auto-quote-page .btn, .auto-quote-page .btn-back, .auto-quote-page .add-preferred, .auto-quote-page .history-add-btn, .auto-quote-page .save-quote-link{
  border-color: #0abab5 !important;
  color: #089895 !important;
}

.auto-quote-page .history-card{
  background: #eefdfc !important;
}

.auto-quote-page .history-card h3{
  color: #0a5f5d !important;
}

.auto-quote-page .history-card-close{
  border-color: #0abab5 !important;
  color: #0abab5 !important;
}

.auto-quote-page .history-add-btn{
  background: #fff !important;
}

.auto-quote-page .history-add-btn:hover{
  background: #e9fbfa !important;
}

.auto-quote-page .license-age-field, .auto-quote-page .license-month-field{
  display: none;
}

.auto-quote-page .license-age-field.is-visible, .auto-quote-page .license-month-field.is-visible{
  display: block;
}

/* Removed preferred name button */
.auto-quote-page .add-preferred{
  display: none !important;
}


/* REAL separator line fix: line first, then clear gap, then buttons */
.auto-quote-page .form-action-separator{
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  height: 1px !important;
  margin-left: -50vw !important;
  margin-top: 34px !important;
  margin-bottom: 46px !important; /* THIS is the gap after line before buttons */
  background: #d7dfdc !important;
  display: block !important;
  flex: none !important;
}

.auto-quote-page .form-actions{
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 44px !important;
}

.auto-quote-page .form-actions::before{
  display: none !important;
  content: none !important;
}

.auto-quote-page .btn-back, .auto-quote-page .btn-next{
  color: #fff !important;
  background: #0abab5 !important;
  border-color: #0abab5 !important;
}

.auto-quote-page .btn:disabled{
  color: #fff !important;
  opacity: .45 !important;
}




/* Responsive fit fixes — desktop design remains unchanged */
.auto-quote-page *{
  box-sizing: border-box;
}

body.auto-quote-page, body.auto-quote-page{
  max-width: 100%;
  overflow-x: hidden;
}

.auto-quote-page .quote-form, .auto-quote-page .form-frame, .auto-quote-page .step-shell{
  max-width: 100%;
}

@media (max-width: 1024px){
  .auto-quote-page .quote-main, .auto-quote-page .quote-form, .auto-quote-page .form-frame{
    width: 100% !important;
    max-width: 100% !important;
  }

  .auto-quote-page .step-shell{
    width: min(92vw, 760px) !important;
  }

  .auto-quote-page .history-card{
    width: calc(100vw - 48px) !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .auto-quote-page .form-actions{
    width: min(92vw, 760px) !important;
  }

  .auto-quote-page .form-action-separator{
    width: 100vw !important;
  }
}

@media (max-width: 768px){
  .auto-quote-page .step-shell{
    width: calc(100vw - 32px) !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .auto-quote-page .step-shell h2, .auto-quote-page .quote-step h2{
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
  }

  .auto-quote-page .form-row, .auto-quote-page .date-row, .auto-quote-page .two-cols, .auto-quote-page .history-date-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .auto-quote-page .segmented{
    width: 100% !important;
  }

  .auto-quote-page .segmented.two, .auto-quote-page .segmented.three{
    grid-template-columns: 1fr !important;
  }

  .auto-quote-page .segmented label, .auto-quote-page .segmented span{
    width: 100% !important;
  }

  .auto-quote-page input, .auto-quote-page select, .auto-quote-page textarea{
    width: 100% !important;
    max-width: 100% !important;
  }

  .auto-quote-page .history-card{
    width: calc(100vw - 28px) !important;
    margin-left: 50% !important;
    margin-right: 50% !important;
    padding: 34px 18px 40px !important;
  }

  .auto-quote-page .history-card h3{
    font-size: 20px !important;
  }

  .auto-quote-page .form-action-separator{
    margin-top: 28px !important;
    margin-bottom: 34px !important;
  }

  .auto-quote-page .form-actions{
    width: calc(100vw - 32px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .auto-quote-page .form-actions .btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px){
  .auto-quote-page .step-shell{
    width: calc(100vw - 20px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .auto-quote-page .question-row{
    gap: 8px !important;
  }

  .auto-quote-page .question-row label, .auto-quote-page .field-group label{
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .auto-quote-page .history-card{
    width: calc(100vw - 16px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .auto-quote-page .history-card-close{
    top: 12px !important;
    right: 12px !important;
  }

  .auto-quote-page .form-actions{
    width: calc(100vw - 20px) !important;
  }

  .auto-quote-page .btn{
    height: 52px !important;
    font-size: 18px !important;
  }
}




/* Icon progress bar like GetRates reference */



























/* Coverage date fix: remove extra upper separator line, keep button separator only */
body.auto-quote-page .quote-step.is-active[data-step="4"]{
  border-bottom: 0 !important;
}

body.auto-quote-page .quote-step.is-active[data-step="4"]::after, body.auto-quote-page .coverage-shell::after, body.auto-quote-page .coverage-date::after{
  display: none !important;
  content: none !important;
  border: 0 !important;
}


/* Insurance and Claims History step */
.auto-quote-page .claims-history-shell{
  max-width: 620px;
}

.auto-quote-page .claims-history-step h2{
  margin-bottom: 52px;
}

.auto-quote-page .claims-question-block{
  margin: 0 0 46px;
}

.auto-quote-page .claims-question-block .question-row{
  align-items: flex-start;
  margin-bottom: 18px;
}

.auto-quote-page .claims-question-block .question-row label{
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.auto-quote-page .claims-question-block .segmented{
  margin-bottom: 0;
}

.auto-quote-page .claim-card{
  margin-top: 38px;
}

@media (max-width: 720px){
  .auto-quote-page .claims-history-step h2{
    margin-bottom: 38px;
  }
}


/* Insurance and Claims History continued step */
.auto-quote-page .claims-contd-shell{
  max-width: 560px;
}

.auto-quote-page .claims-contd-step h2{
  margin-bottom: 52px;
}

.auto-quote-page .claims-contd-field{
  margin-bottom: 46px;
}

.auto-quote-page .claims-contd-field label{
  display: block;
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 14px;
}

.auto-quote-page .claims-contd-field select{
  width: 100%;
  height: 52px;
  border: 1px solid #cfd9d5;
  background-color: #fff;
  color: #1b2b25;
  font: inherit;
  padding: 0 18px;
  outline: none;
}

.auto-quote-page .claims-contd-field select:focus{
  border-color: #0abab5;
  box-shadow: inset 0 -2px 0 #0abab5;
}

@media (max-width: 720px){
  .auto-quote-page .claims-contd-step h2{
    margin-bottom: 38px;
  }
}


/* Accident Benefits Coverage step */
.auto-quote-page .accident-benefits-shell{
  max-width: 620px;
}

.auto-quote-page .accident-benefits-step h2{
  margin-bottom: 46px;
}

.auto-quote-page .accident-benefits-intro{
  color: #17241f;
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 36px;
}

.auto-quote-page .accident-benefits-intro p{
  margin: 0 0 18px;
}

.auto-quote-page .accident-benefits-intro a{
  color: #0abab5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auto-quote-page .accident-question-block{
  margin: 0 0 34px;
}

.auto-quote-page .accident-question-block .question-row{
  align-items: flex-start;
  margin-bottom: 18px;
}

.auto-quote-page .accident-question-block .question-row label{
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.auto-quote-page .accident-question-block .segmented{
  margin-bottom: 0;
}

@media (max-width: 720px){
  .auto-quote-page .accident-benefits-step h2{
    margin-bottom: 34px;
  }

  .auto-quote-page .accident-benefits-intro{
    margin-bottom: 30px;
  }
}


/* Almost Done contact/consent step */
.auto-quote-page .almost-done-shell{
  max-width: 560px;
}

.auto-quote-page .almost-done-step h2{
  margin-bottom: 52px;
}

.auto-quote-page .almost-done-field{
  margin-bottom: 42px;
}

.auto-quote-page .almost-done-field .question-row{
  align-items: flex-start;
  margin-bottom: 16px;
}

.auto-quote-page .almost-done-field .question-row label{
  color: #17241f;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

.auto-quote-page .almost-done-field input{
  width: 100%;
  height: 52px;
  border: 1px solid #cfd9d5;
  background: #fff;
  color: #1b2b25;
  font: inherit;
  padding: 0 18px;
  outline: none;
}

.auto-quote-page .almost-done-field input:focus{
  border-color: #0abab5;
  box-shadow: inset 0 -2px 0 #0abab5;
}

.auto-quote-page .almost-done-copy{
  color: #17241f;
  font-size: 15px;
  line-height: 1.48;
  margin: 10px 0 18px;
}

.auto-quote-page .almost-done-copy p{
  margin: 0 0 24px;
}

.auto-quote-page .almost-done-copy a{
  color: #0abab5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auto-quote-page .consent-note-box{
  background: #eefdfc;
  padding: 22px 28px 26px;
  margin-top: 18px;
  color: #17241f;
  font-size: 15px;
  line-height: 1.5;
}

.auto-quote-page .agree-check{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 500;
}

.auto-quote-page .agree-check input{
  width: 28px;
  height: 28px;
  accent-color: #0abab5;
}

.auto-quote-page .note-divider{
  height: 1px;
  background: #cfd9d5;
  margin: 22px 0;
}

.auto-quote-page .consent-note-box p{
  margin: 0;
}

@media (max-width: 720px){
  .auto-quote-page .almost-done-step h2{
    margin-bottom: 38px;
  }

  .auto-quote-page .consent-note-box{
    padding: 20px 18px 24px;
  }
}


/* Review summary page */
.auto-quote-page .review-summary-shell{
  max-width: 760px;
}

.auto-quote-page .review-summary-step h2{
  margin-bottom: 34px;
}

.auto-quote-page .summary-top-actions{
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 28px;
  flex-wrap: wrap;
}

.auto-quote-page .summary-add-btn{
  min-width: 190px;
  height: 50px;
  border: 1px solid #0abab5;
  background: #fff;
  color: #089895;
  border-radius: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.auto-quote-page .summary-add-btn:hover{
  background: #e9fbfa;
}

.auto-quote-page .summary-card{
  background: #fff;
  border: 1px solid #e4e9e7;
  box-shadow: 0 14px 34px rgba(15, 39, 45, .08);
  padding: 28px;
  margin-bottom: 24px;
}

.auto-quote-page .summary-card-head h3{
  margin: 0 0 8px;
  color: #17241f;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.auto-quote-page .summary-card-head p{
  margin: 0 0 18px;
  color: #5a6662;
  font-size: 15px;
  line-height: 1.45;
}

.auto-quote-page .summary-list{
  border-top: 1px solid #e4e9e7;
}

.auto-quote-page .summary-row{
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  gap: 14px;
  align-items: center;
  min-height: 74px;
  border-bottom: 1px solid #e4e9e7;
  padding: 14px 0;
}

.auto-quote-page .summary-row-icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.auto-quote-page .summary-row-main{
  display: grid;
  gap: 4px;
}

.auto-quote-page .summary-row-main strong{
  color: #17241f;
  font-size: 17px;
  font-weight: 700;
}

.auto-quote-page .summary-row-main span{
  color: #697572;
  font-size: 14px;
}

.auto-quote-page .summary-link{
  border: 0;
  background: transparent;
  color: #089895;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
}

.auto-quote-page .summary-remove{
  width: 30px;
  height: 30px;
  border: 1px solid #0abab5;
  background: #fff;
  color: #0abab5;
  font-size: 22px;
  line-height: 24px;
  cursor: pointer;
}

.auto-quote-page .summary-note{
  display: grid;
  gap: 6px;
  background: #eefdfc;
  border-left: 4px solid #0abab5;
  padding: 18px 20px;
  color: #17241f;
  font-size: 15px;
  line-height: 1.45;
}

.auto-quote-page .summary-note strong{
  font-size: 16px;
}

@media (max-width: 720px){
  .auto-quote-page .review-summary-step h2{
    margin-bottom: 26px;
  }

  .auto-quote-page .summary-card{
    padding: 22px 16px;
  }

  .auto-quote-page .summary-top-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .auto-quote-page .summary-add-btn{
    width: 100%;
  }

  .auto-quote-page .summary-row{
    grid-template-columns: 38px 1fr;
    gap: 12px;
  }

  .auto-quote-page .summary-link, .auto-quote-page .summary-remove{
    justify-self: start;
    grid-column: 2;
  }
}


/* Summary add-driver/add-vehicle flow */
.auto-quote-page .summary-flow-save{
  display: none;
  width: min(760px, 92vw);
  margin: 22px auto 0;
  padding: 18px 22px;
  background: #eefdfc;
  border: 1px solid #bdecea;
}

.auto-quote-page .summary-flow-save.is-visible{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.auto-quote-page .summary-flow-save span{
  color: #17241f;
  font-size: 15px;
  line-height: 1.4;
}

.auto-quote-page .summary-flow-save button{
  min-width: 170px;
  height: 48px;
  border: 1px solid #0abab5;
  background: #0abab5;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auto-quote-page .summary-empty{
  padding: 18px 0;
  color: #697572;
  font-size: 15px;
  border-bottom: 1px solid #e4e9e7;
}

@media (max-width: 720px){
  .auto-quote-page .summary-flow-save{
    width: calc(100vw - 32px);
    padding: 16px;
  }

  .auto-quote-page .summary-flow-save.is-visible{
    display: grid;
  }

  .auto-quote-page .summary-flow-save button{
    width: 100%;
  }
}


/* Summary coverage and referral fields */
.auto-quote-page .summary-extra-card{
  margin-top: 24px;
}

.auto-quote-page .summary-checkbox-list{
  display: grid;
  gap: 14px;
  border-top: 1px solid #e4e9e7;
  padding-top: 20px;
}

.auto-quote-page .summary-checkbox-list label{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #17241f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.auto-quote-page .summary-checkbox-list input[type="checkbox"]{
  width: 24px;
  height: 24px;
  min-width: 24px;
  accent-color: #0abab5;
}

.auto-quote-page .summary-source-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid #e4e9e7;
  padding-top: 20px;
}

.auto-quote-page .summary-source-grid label{
  min-height: 50px;
  border: 1px solid #d9e4e1;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #17241f;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.auto-quote-page .summary-source-grid label:hover{
  border-color: #0abab5;
  background: #e9fbfa;
}

.auto-quote-page .summary-source-grid input[type="radio"]{
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: #0abab5;
}

@media (max-width: 768px){

  .auto-quote-page .summary-source-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .auto-quote-page .summary-source-grid label{
    width: 100% !important;
    min-height: 72px !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  .auto-quote-page .summary-source-grid input[type="radio"]{
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
  }

  .auto-quote-page .summary-checkbox-list label{
    font-size: 15px !important;
  }
}


/* Thank you final page */
.auto-quote-page .thank-you-shell{
  max-width: 720px;
}

.auto-quote-page .thank-you-card{
  background: #fff;
  border: 1px solid #e4e9e7;
  box-shadow: 0 14px 34px rgba(15, 39, 45, .08);
  text-align: center;
  padding: 54px 42px;
}

.auto-quote-page .thank-you-icon{
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #0abab5;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
}

.auto-quote-page .thank-you-step h2{
  margin: 0 0 14px;
  color: #0a5f5d;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.2;
}

.auto-quote-page .thank-you-main{
  margin: 0 0 10px;
  color: #17241f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.auto-quote-page .thank-you-sub{
  margin: 0 auto 28px;
  color: #5a6662;
  font-size: 16px;
  line-height: 1.5;
  max-width: 520px;
}

.auto-quote-page .thank-you-next{
  background: #eefdfc;
  border-left: 4px solid #0abab5;
  text-align: left;
  padding: 18px 20px;
  display: grid;
  gap: 8px;
  color: #17241f;
  font-size: 15px;
  line-height: 1.45;
}

body.auto-quote-page .quote-step.thank-you-step.is-active ~ .form-action-separator, body.auto-quote-page .quote-step.thank-you-step.is-active ~ .form-actions{
  display: none !important;
}

@media (max-width: 720px){
  .auto-quote-page .thank-you-card{
    padding: 40px 20px;
  }

  .auto-quote-page .thank-you-step h2{
    font-size: 34px;
  }

  .auto-quote-page .thank-you-main{
    font-size: 19px;
  }
}


/* Equal Back/Next button widths on responsive screens */
.auto-quote-page .form-actions{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: min(760px, 92vw) !important;
}

.auto-quote-page .form-actions.is-single{
  grid-template-columns: 1fr !important;
}

.auto-quote-page .form-actions .btn{
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 768px){
  .auto-quote-page .form-actions{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: calc(100vw - 32px) !important;
  }

  .auto-quote-page .form-actions.is-single{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px){
  .auto-quote-page .form-actions{
    gap: 10px !important;
    width: calc(100vw - 20px) !important;
  }
}

/* Summary add flow Cancel button */
.auto-quote-page .summary-flow-buttons{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.auto-quote-page .summary-flow-cancel{
  background: #fff !important;
  color: #089895 !important;
}

@media (max-width: 720px){
  .auto-quote-page .summary-flow-buttons{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .auto-quote-page .summary-flow-buttons button{
    width: 100%;
    min-width: 0 !important;
  }
}


/* Auto summary save: no manual Save/Cancel bar needed */
.auto-quote-page .summary-flow-save{
  display: none !important;
}


/* Cancel option while adding another driver/vehicle from Summary */
.auto-quote-page .summary-add-cancel-bar{
  display: none;
  width: min(760px, 92vw);
  margin: 22px auto 0;
  padding: 18px 22px;
  background: #eefdfc;
  border: 1px solid #bdecea;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.auto-quote-page .summary-add-cancel-bar.is-visible{
  display: flex;
}

.auto-quote-page .summary-add-cancel-bar span{
  color: #17241f;
  font-size: 15px;
  line-height: 1.4;
}

.auto-quote-page .summary-add-cancel-bar button{
  min-width: 150px;
  height: 46px;
  border: 1px solid #0abab5;
  background: #fff;
  color: #089895;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auto-quote-page .summary-add-cancel-bar button:hover{
  background: #e9fbfa;
}

@media (max-width: 720px){
  .auto-quote-page .summary-add-cancel-bar{
    width: calc(100vw - 32px);
    padding: 16px;
  }

  .auto-quote-page .summary-add-cancel-bar.is-visible{
    display: grid;
  }

  .auto-quote-page .summary-add-cancel-bar button{
    width: 100%;
  }
}


/* Requested fixes: smaller top icons, mobile Back like Next */






@media (max-width: 768px){
  

  

  

  .auto-quote-page .form-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: calc(100vw - 32px) !important;
  }

  .auto-quote-page .form-actions .btn, .auto-quote-page .form-actions .btn-back, .auto-quote-page .form-actions .btn-next{
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0abab5 !important;
    border-color: #0abab5 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .auto-quote-page .form-actions .btn:disabled, .auto-quote-page .form-actions .btn-next:disabled{
    background: #9de1df !important;
    border-color: #9de1df !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }
}

@media (max-width: 420px){
  .auto-quote-page .form-actions{
    width: calc(100vw - 20px) !important;
  }
}


/* Manual-only vehicle first page and coverage options on vehicle details page */
.auto-quote-page .manual-vehicle-fields .field-group, .auto-quote-page .first-page-contact-field{
  margin-bottom: 28px;
}

.auto-quote-page .vehicle-coverage-options{
  margin-top: 34px;
  border-top: 1px solid #d7dfdc;
  padding-top: 28px;
}

.auto-quote-page .vehicle-coverage-options .summary-card-head h3{
  margin: 0 0 8px;
  color: #0a5f5d;
  font-size: 24px;
  font-weight: 500;
}

.auto-quote-page .vehicle-coverage-options .summary-card-head p{
  margin: 0 0 18px;
  color: #17241f;
  font-size: 15px;
  line-height: 1.45;
}


/* Direct driver details page */
.auto-quote-page .driver-details-shell .driver-info-card{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
.auto-quote-page .driver-details-shell .compact-segment{
  max-width: 520px;
}
.auto-quote-page .driver-details-shell .field-group{
  margin-bottom: 28px;
}


/* Driver quote-for conditional fields + email fix */
.auto-quote-page .driver-someone-fields{
  display: none;
}

.auto-quote-page .driver-someone-fields.is-visible{
  display: block;
}

.auto-quote-page .driver-details-shell .quote-for-segment{
  max-width: 680px;
}

.auto-quote-page .driver-details-shell .email-field input, .auto-quote-page .driver-details-shell input[type="email"]{
  width: 100%;
  height: 58px;
  border: 1px solid #ccd7d4;
  border-radius: 0;
  padding: 0 16px;
  font: inherit;
  background: #fff;
  box-sizing: border-box;
}

.auto-quote-page .driver-details-shell .email-field input:focus, .auto-quote-page .driver-details-shell input[type="email"]:focus{
  outline: none;
  border-color: #0abab5;
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.12);
}


/* Quote-for first, single name field */
.auto-quote-page .driver-main-details, .auto-quote-page .driver-someone-fields{
  display: none;
}

.auto-quote-page .driver-main-details.is-visible, .auto-quote-page .driver-someone-fields.is-visible{
  display: block;
}

.auto-quote-page .driver-details-shell .quote-for-field{
  margin-bottom: 30px;
}

.auto-quote-page .driver-details-shell .quote-for-segment{
  max-width: 700px;
}

.auto-quote-page .driver-details-shell .email-field input, .auto-quote-page .driver-details-shell input[type="email"]{
  width: 100%;
  height: 58px;
  border: 1px solid #ccd7d4;
  border-radius: 0;
  padding: 0 16px;
  font: inherit;
  background: #fff;
  box-sizing: border-box;
}

.auto-quote-page .driver-details-shell .email-field input:focus, .auto-quote-page .driver-details-shell input[type="email"]:focus{
  outline: none;
  border-color: #0abab5;
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.12);
}


/* Date of birth calendar icon */
.auto-quote-page .date-input-wrap{
  position: relative;
  width: 100%;
}

.auto-quote-page .date-input-wrap input{
  width: 100%;
  padding-right: 52px !important;
}

.auto-quote-page .date-field-icon{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b9694;
  font-size: 18px;
  pointer-events: none;
}


/* Driver licence extra details */
.auto-quote-page .license-extra-section{
  display: none;
  margin-top: 30px;
}

.auto-quote-page .license-extra-section.is-visible{
  display: block;
}

.auto-quote-page .field-help-text{
  margin: 8px 0 0;
  color: #17241f;
  font-size: 15px;
  line-height: 1.55;
}

.auto-quote-page .license-upload-field input[type="file"]{
  width: 100%;
  max-width: 520px;
  border: 1px solid #ccd7d4;
  padding: 10px 14px;
  background: #fff;
  font: inherit;
}

.auto-quote-page .upload-label{
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.auto-quote-page .upload-icon{
  font-size: 34px;
  line-height: 1;
}

.auto-quote-page .date-input-wrap{
  position: relative;
  width: 100%;
}

.auto-quote-page .date-input-wrap input{
  width: 100%;
  padding-right: 52px !important;
}

.auto-quote-page .date-field-icon{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #8b9694;
  font-size: 18px;
  pointer-events: none;
}


/* Native date picker support */
.auto-quote-page .date-input-wrap input[type="date"]{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding-right: 52px !important;
}

.auto-quote-page .date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0;
  cursor: pointer;
}

.auto-quote-page .date-field-icon{
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* Fix date fields to match normal form inputs */
body.auto-quote-page .date-input-wrap{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.auto-quote-page .date-input-wrap input, body.auto-quote-page .date-input-wrap input[type="date"], body.auto-quote-page #driverDateOfBirth, body.auto-quote-page #driverLicenseExpiry{
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid #ccd7d4 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #17241f !important;
  font: inherit !important;
  font-size: 18px !important;
  line-height: 58px !important;
  padding: 0 52px 0 16px !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

body.auto-quote-page .date-input-wrap input:focus, body.auto-quote-page .date-input-wrap input[type="date"]:focus, body.auto-quote-page #driverDateOfBirth:focus, body.auto-quote-page #driverLicenseExpiry:focus{
  border-color: #0abab5 !important;
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.12) !important;
}

body.auto-quote-page .date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  width: 44px !important;
  height: 44px !important;
  cursor: pointer !important;
  position: absolute !important;
  right: 4px !important;
}

body.auto-quote-page .date-input-wrap .date-field-icon{
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #8b9694 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

/* Database-powered vehicle dropdown status */
.auto-quote-page .vehicle-data-status{
  min-height: 1.25em;
  margin-top: 8px;
}
.auto-quote-page .vehicle-data-status.is-error{
  color: #b42318;
}
.auto-quote-page .manual-vehicle-fields select:disabled{
  cursor: not-allowed;
  opacity: 0.7;
}

/* =========================================================
   BUSINESS FORM VISUAL THEME OVERRIDE
   Design-only update: no fields, values, names or JS changed.
   ========================================================= */
body.auto-quote-page{
  --accent: #0abab5;
  --accent-dark: #27a99f;
  --text: #2f2f2e;
  --muted: #666666;
  --line: #cccccc;
  --soft-line: #e4ebe7;
  --field: #ffffff;
  background: #f4fbfa;
  color: #2f2f2e;
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
}

body.auto-quote-page .sticky-header{
  height: 70px;
  background: #e60000;
  border: 0;
  box-shadow: 0 1px 10px rgba(0,0,0,.04);
}

body.auto-quote-page .header-container{
  max-width: 1200px;
  padding: 0 24px;
}

body.auto-quote-page .logo-img{ max-height: 32px; }
body.auto-quote-page .header-title{
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
body.auto-quote-page .header-contact-actions{ gap: 18px; }
body.auto-quote-page .header-contact-link, body.auto-quote-page .header-contact-link .phone-number, body.auto-quote-page .header-contact-link i{ color: #fff !important; }
body.auto-quote-page .header-contact-link{ font-size: 14px; }












body.auto-quote-page .quote-main{
  min-height: 620px;
  background: #f4fbfa;
}
body.auto-quote-page .quote-step{
  min-height: 0;
  padding: 58px 24px 86px;
}
body.auto-quote-page .step-shell, body.auto-quote-page .start-shell, body.auto-quote-page .use-shell, body.auto-quote-page .coverage-shell, body.auto-quote-page .savings-shell, body.auto-quote-page .driver-details-shell{
  max-width: 720px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,63,45,.05);
  padding: 48px 40px;
}
body.auto-quote-page .step-shell h1, body.auto-quote-page .step-shell h2{
  margin: 0 0 12px;
  color: #2f2f2e;
  text-align: left;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.25px;
}
body.auto-quote-page .intro-copy, body.auto-quote-page .subtitle, body.auto-quote-page .didyouknow{
  max-width: none;
  margin: 0 0 32px;
  color: #666;
  text-align: left;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}
body.auto-quote-page .province-link{ margin: -20px 0 30px; }

body.auto-quote-page .field-group{ margin-bottom: 24px; }
body.auto-quote-page .field-group label, body.auto-quote-page .standalone-label, body.auto-quote-page .question-row label, body.auto-quote-page .date-title{
  color: #2f2f2e;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
body.auto-quote-page select, body.auto-quote-page input[type="text"], body.auto-quote-page input[type="tel"], body.auto-quote-page input[type="email"], body.auto-quote-page input[type="number"], body.auto-quote-page input[type="date"], body.auto-quote-page textarea{
  min-height: 54px;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  color: #2f2f2e;
  font-size: 15px !important;
  line-height: normal !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}
body.auto-quote-page textarea{ padding-top: 14px !important; }
body.auto-quote-page select:focus, body.auto-quote-page input:focus, body.auto-quote-page textarea:focus{
  outline: none;
  border-color: #0abab5 !important;
  box-shadow: 0 0 0 3px rgba(51,192,180,.12) !important;
}
body.auto-quote-page select:disabled, body.auto-quote-page input:disabled{ background-color: #f2f4f3 !important; }
body.auto-quote-page .field-help-text{ color: #767676; font-size: 13px; }

body.auto-quote-page .segmented{
  gap: 10px;
  margin-bottom: 28px;
}
body.auto-quote-page .segmented label span{
  min-height: 52px;
  border: 1px solid #ccd5d1;
  border-radius: 4px;
  background: #fff;
  color: #3e4743;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}
body.auto-quote-page .segmented label:hover span{
  border-color: #0abab5;
  background: rgba(51,192,180,.04);
}
body.auto-quote-page .segmented input:checked + span{
  border-color: #0abab5;
  background: rgba(51,192,180,.10);
  color: #237e77;
  box-shadow: inset 0 0 0 1px #0abab5;
}

body.auto-quote-page .summary-card, body.auto-quote-page .vehicle-coverage-options, body.auto-quote-page .info-card, body.auto-quote-page .review-card, body.auto-quote-page .savings-card{
  border: 1px solid #e4ebe7;
  border-radius: 6px;
  background: #fbfdfc;
  box-shadow: none;
}
body.auto-quote-page .summary-checkbox-list label, body.auto-quote-page .checkbox-row, body.auto-quote-page .check-row{
  border-radius: 4px;
}
body.auto-quote-page input[type="checkbox"], body.auto-quote-page input[type="radio"]{ accent-color: #0abab5; }

body.auto-quote-page .help-icon{
  border-color: #0abab5;
  color: #0abab5;
  background: #fff;
}
body.auto-quote-page .help-icon:hover{ background: rgba(51,192,180,.1); }

body.auto-quote-page .step-actions, body.auto-quote-page .form-actions, body.auto-quote-page .navigation-row, body.auto-quote-page .quote-navigation{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.auto-quote-page .continue-btn, body.auto-quote-page .next-btn, body.auto-quote-page .primary-btn, body.auto-quote-page button[type="submit"]{
  min-height: 48px;
  border: 1px solid #0abab5;
  border-radius: 4px;
  background: #0abab5;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}
body.auto-quote-page .continue-btn:hover, body.auto-quote-page .next-btn:hover, body.auto-quote-page .primary-btn:hover, body.auto-quote-page button[type="submit"]:hover{
  background: #2aaca1;
  border-color: #2aaca1;
}
body.auto-quote-page .back-btn, body.auto-quote-page .secondary-btn{
  border-radius: 4px;
  color: #4f5a56;
}

body.auto-quote-page .quote-footer{
  background: #fff;
  border-top: 1px solid #e4ebe7;
}
body.auto-quote-page .error-message, body.auto-quote-page .field-error{ color: #b42318; }
body.auto-quote-page .is-invalid, body.auto-quote-page [aria-invalid="true"]{ border-color: #b42318 !important; }

@media (max-width: 767px){
  body.auto-quote-page .sticky-header{ height: 62px; }
  
  body.auto-quote-page .header-container{ padding: 0 14px; }
  body.auto-quote-page .header-title{ font-size: 13px; padding: 0 8px; }
  body.auto-quote-page .header-contact-actions .phone-number{ display: none; }
  body.auto-quote-page .header-contact-actions{ gap: 12px; }
  body.auto-quote-page .header-contact-link i{ display: inline-block !important; font-size: 17px; }
  
  
  
  body.auto-quote-page .quote-step{ padding: 30px 14px 58px; }
  body.auto-quote-page .step-shell, body.auto-quote-page .start-shell, body.auto-quote-page .use-shell, body.auto-quote-page .coverage-shell, body.auto-quote-page .savings-shell, body.auto-quote-page .driver-details-shell{
    padding: 30px 20px;
    border-radius: 7px;
  }
  body.auto-quote-page .step-shell h1, body.auto-quote-page .step-shell h2{ font-size: 23px; }
}

@media (max-width: 480px){
  
  
  body.auto-quote-page .step-shell, body.auto-quote-page .start-shell, body.auto-quote-page .use-shell, body.auto-quote-page .coverage-shell, body.auto-quote-page .savings-shell, body.auto-quote-page .driver-details-shell{ padding: 26px 16px; }
}

/* =========================================================
   FINAL CARD SPACING + SINGLE BORDER FIX
   Design-only: form fields, names, values and JS stay unchanged.
   ========================================================= */
body.auto-quote-page .step-shell{
  width: 100%;
  max-width: 760px;
  box-sizing: border-box;
  padding: 54px 48px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 8px 28px rgba(25, 58, 49, .08) !important;
}

/* Specialized shells are the same card element, so do not draw a second frame. */
body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
  border: 0 !important;
  outline: 0 !important;
}

/* Ensure every standard control has only one visible border. */
body.auto-quote-page .field-group input:not([type="checkbox"]):not([type="radio"]), body.auto-quote-page .field-group select, body.auto-quote-page .field-group textarea, body.auto-quote-page .date-input-wrap input, body.auto-quote-page #driverDateOfBirth, body.auto-quote-page #driverLicenseExpiry{
  box-sizing: border-box !important;
  border: 1px solid #ccd7d4 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.auto-quote-page .field-group input:not([type="checkbox"]):not([type="radio"]):focus, body.auto-quote-page .field-group select:focus, body.auto-quote-page .field-group textarea:focus, body.auto-quote-page .date-input-wrap input:focus, body.auto-quote-page #driverDateOfBirth:focus, body.auto-quote-page #driverLicenseExpiry:focus{
  border-color: #0abab5 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(51, 192, 180, .12) !important;
}

/* Remove extra decorative frames around controls while retaining real option cards. */
body.auto-quote-page .input-wrap, body.auto-quote-page .select-wrap, body.auto-quote-page .date-input-wrap, body.auto-quote-page .field-control, body.auto-quote-page .form-control-wrap{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

@media (max-width: 767px){
  body.auto-quote-page .step-shell{
    padding: 36px 24px !important;
  }
}

@media (max-width: 480px){
  body.auto-quote-page .quote-step{
    padding-left: 12px;
    padding-right: 12px;
  }

  body.auto-quote-page .step-shell{
    padding: 30px 18px !important;
  }
}

/* =========================================================
   FINAL SCREENSHOT FIX — 2026-07-15
   Design only. No field, name, option, value or JS change.
   Keep this block at the very end of this file.
   ========================================================= */

/* Page background and safe natural document height */
body.auto-quote-page, body.auto-quote-page .quote-main, body.auto-quote-page .quote-form{
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

body.auto-quote-page .quote-main{
  background: #f4f8f6 !important;
  padding: 42px 16px 20px !important;
}

/* Active step must grow with every existing field */
body.auto-quote-page .quote-step, body.auto-quote-page .quote-step.is-active{
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

/* One main white card only */
body.auto-quote-page .step-shell, body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 46px 44px 50px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: #fff !important;
  border: 1px solid #e2ebe7 !important;
  border-radius: 12px !important;
  outline: 0 !important;
  box-shadow: 0 10px 30px rgba(25, 58, 49, .07) !important;
}

/* Remove the accidental second card around Coverage Options */
body.auto-quote-page .vehicle-coverage-options{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 36px 0 0 !important;
  padding: 30px 0 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #e1e8e5 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.auto-quote-page .vehicle-coverage-options .summary-card-head, body.auto-quote-page .vehicle-coverage-options .summary-checkbox-list{
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.auto-quote-page .vehicle-coverage-options .summary-card-head h3{
  margin: 0 0 7px !important;
  color: #089895 !important;
  font-size: 25px !important;
  line-height: 1.25 !important;
}

body.auto-quote-page .vehicle-coverage-options .summary-card-head p{
  margin: 0 0 22px !important;
}

body.auto-quote-page .vehicle-coverage-options .summary-checkbox-list{
  display: grid !important;
  gap: 12px !important;
}

body.auto-quote-page .vehicle-coverage-options .summary-checkbox-list label{
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.auto-quote-page .vehicle-coverage-options input[type="checkbox"]{
  flex: 0 0 auto !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 1px 0 0 !important;
}

body.auto-quote-page .vehicle-coverage-options .summary-checkbox-list span{
  display: block !important;
  min-width: 0 !important;
  line-height: 1.45 !important;
}

/* Keep segmented choices as one clean border, not nested borders */
body.auto-quote-page .segmented{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.auto-quote-page .segmented label{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.auto-quote-page .segmented label span{
  box-sizing: border-box !important;
  border: 1px solid #cfdad6 !important;
  box-shadow: none !important;
}

body.auto-quote-page .segmented input:checked + span{
  border-color: #0abab5 !important;
  box-shadow: inset 0 0 0 1px #0abab5 !important;
}

/* Form controls use exactly one border */
body.auto-quote-page input:not([type="checkbox"]):not([type="radio"]), body.auto-quote-page select, body.auto-quote-page textarea{
  box-sizing: border-box !important;
  border: 1px solid #cfd8d5 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Navigation: proper gap below the card and no full-width separator */
body.auto-quote-page .form-action-separator, body.auto-quote-page .form-actions::before, body.auto-quote-page .form-actions::after{
  display: none !important;
  content: none !important;
}

body.auto-quote-page .form-actions, body.auto-quote-page .form-actions:not(.is-single), body.auto-quote-page .form-actions.is-single{
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 24px auto 0 !important;
  padding: 0 0 46px !important;
  border: 0 !important;
  background: transparent !important;
}

body.auto-quote-page .form-actions.is-single{
  grid-template-columns: 1fr !important;
}

body.auto-quote-page .form-actions .btn{
  width: 100% !important;
  min-height: 52px !important;
  border-radius: 4px !important;
}

@media (max-width: 767px){
  body.auto-quote-page .quote-main{
    padding: 24px 12px 12px !important;
  }

  body.auto-quote-page .step-shell, body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
    padding: 32px 22px 38px !important;
    border-radius: 9px !important;
  }

  body.auto-quote-page .form-actions, body.auto-quote-page .form-actions:not(.is-single){
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 18px !important;
    padding-bottom: 30px !important;
  }
}

@media (max-width: 480px){
  body.auto-quote-page .step-shell, body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
    padding: 28px 16px 34px !important;
  }

  body.auto-quote-page .step-shell h1, body.auto-quote-page .step-shell h2{
    font-size: 25px !important;
  }
}

/* =========================================================
   FINAL WIDTH + BOTTOM SPACING ADJUSTMENT
   ========================================================= */
@media (min-width: 768px){
  body.auto-quote-page .step-shell, body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
    width: min(100%, 640px) !important;
    max-width: 640px !important;
    padding: 42px 38px 72px !important;
  }

  body.auto-quote-page .form-actions, body.auto-quote-page .form-actions:not(.is-single), body.auto-quote-page .form-actions.is-single{
    width: min(100%, 640px) !important;
    max-width: 640px !important;
  }
}

@media (max-width: 767px){
  body.auto-quote-page .step-shell, body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
    padding-bottom: 52px !important;
  }
}

/* =========================================================
   FINAL USER-REQUESTED CARD SIZE + SPACING FIX
   - Narrower desktop card
   - Small bottom padding inside card
   - Clear gap between card and Back/Next buttons
   ========================================================= */

/* Keep the page centred without stretching the form */
body.auto-quote-page .quote-main{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* The step itself should not create extra empty space */
body.auto-quote-page .quote-step, body.auto-quote-page .quote-step.is-active{
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Main white card: narrower and balanced */
@media (min-width: 768px){
  body.auto-quote-page .step-shell, body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 38px 34px 42px !important;
  }

  /* Buttons align with the narrower card */
  body.auto-quote-page .form-actions, body.auto-quote-page .form-actions:not(.is-single), body.auto-quote-page .form-actions.is-single{
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 26px auto 0 !important;
    padding-top: 0 !important;
    padding-bottom: 44px !important;
  }

  /* Do not let separator margins remove the card/button gap */
  body.auto-quote-page .form-action-separator{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Coverage options stay part of the same card, without another frame */
body.auto-quote-page .vehicle-coverage-options{
  margin-top: 30px !important;
  padding-top: 26px !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  border-top: 1px solid #e3e9e6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Prevent nested components from making double card borders */
body.auto-quote-page .step-shell .summary-card, body.auto-quote-page .step-shell .driver-info-card, body.auto-quote-page .step-shell .vehicle-coverage-options{
  box-shadow: none !important;
}

/* Mobile: retain comfortable side and bottom spacing */
@media (max-width: 767px){
  body.auto-quote-page .quote-main{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.auto-quote-page .step-shell, body.auto-quote-page .step-shell.start-shell, body.auto-quote-page .step-shell.use-shell, body.auto-quote-page .step-shell.coverage-shell, body.auto-quote-page .step-shell.savings-shell, body.auto-quote-page .step-shell.savings-video-shell, body.auto-quote-page .step-shell.driver-shell, body.auto-quote-page .step-shell.driver-details-shell, body.auto-quote-page .step-shell.address-shell, body.auto-quote-page .step-shell.license-shell, body.auto-quote-page .step-shell.license-history-shell, body.auto-quote-page .step-shell.driving-history-shell, body.auto-quote-page .step-shell.claims-history-shell, body.auto-quote-page .step-shell.claims-contd-shell, body.auto-quote-page .step-shell.accident-benefits-shell, body.auto-quote-page .step-shell.almost-done-shell, body.auto-quote-page .step-shell.review-summary-shell, body.auto-quote-page .step-shell.thank-you-shell{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 30px 20px 36px !important;
  }

  body.auto-quote-page .form-actions, body.auto-quote-page .form-actions:not(.is-single), body.auto-quote-page .form-actions.is-single{
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto 0 !important;
    padding-top: 0 !important;
    padding-bottom: 30px !important;
  }

  body.auto-quote-page .form-action-separator{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   FINAL VISIBLE GAP ABOVE BACK / NEXT BUTTONS
   The separator element sits between the card and buttons,
   so it is used as a transparent spacer.
   ========================================================= */

body.auto-quote-page .form-action-separator{
  display: block !important;
  position: static !important;
  left: auto !important;
  width: 100% !important;
  max-width: 560px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
  clear: both !important;
}

body.auto-quote-page .form-actions, body.auto-quote-page .form-actions:not(.is-single), body.auto-quote-page .form-actions.is-single{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* First step also receives the same visible gap */
body.auto-quote-page .form-actions.is-single{
  margin-top: 0 !important;
}

@media (max-width: 767px){
  body.auto-quote-page .form-action-separator{
    width: 100% !important;
    max-width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
  }
}

/* =========================================================
   FINAL COVERAGE CARD BOTTOM-CUT FIX
   Adds real document-flow space after the final date fields.
   ========================================================= */

/* Coverage Start Date card must grow below the last row */
body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-shell, body.auto-quote-page .quote-step[data-step="4"] .coverage-shell{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 42px !important;
}

/* Add actual flow spacing after Year / Month / Day */
body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-date, body.auto-quote-page .quote-step[data-step="4"] .coverage-date{
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 34px !important;
  overflow: visible !important;
}

body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-date .date-row, body.auto-quote-page .quote-step[data-step="4"] .coverage-date .date-row{
  margin-bottom: 0 !important;
}

/* Reliable spacer even when old margin rules override spacing */
body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-date::after, body.auto-quote-page .quote-step[data-step="4"] .coverage-date::after{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  margin-top: 32px !important;
  visibility: hidden !important;
  clear: both !important;
}

/* Keep buttons separate from the card */
body.auto-quote-page .quote-step.is-active[data-step="4"] ~ .form-action-separator{
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
}

@media (max-width: 767px){
  body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-shell, body.auto-quote-page .quote-step[data-step="4"] .coverage-shell{
    padding-bottom: 34px !important;
  }

  body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-date, body.auto-quote-page .quote-step[data-step="4"] .coverage-date{
    padding-bottom: 26px !important;
  }

  body.auto-quote-page .quote-step.is-active[data-step="4"] .coverage-date::after, body.auto-quote-page .quote-step[data-step="4"] .coverage-date::after{
    margin-top: 24px !important;
  }
}

/* =========================================================
   ABSOLUTE FINAL FIX — NEVER CUT ACTIVE CARD FROM BOTTOM
   Generic fix: does not depend on data-step number.
   ========================================================= */

/* Active section and all of its parents must grow naturally */
html body.auto-quote-page .quote-main, html body.auto-quote-page .quote-form, html body.auto-quote-page .form-frame, html body.auto-quote-page .quote-step.is-active{
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Every active white card gets guaranteed bottom space */
html body.auto-quote-page .quote-step.is-active > .step-shell, html body.auto-quote-page .quote-step.is-active .step-shell{
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 52px !important;
}

/* Ensure the final field/row remains inside the card */
html body.auto-quote-page .quote-step.is-active .step-shell > :last-child{
  margin-bottom: 0 !important;
}

/* Real in-flow spacer at the end of every active card */
html body.auto-quote-page .quote-step.is-active .step-shell::after{
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  clear: both !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Date rows/selects must not escape the card */
html body.auto-quote-page .quote-step.is-active .date-row, html body.auto-quote-page .quote-step.is-active .coverage-date, html body.auto-quote-page .quote-step.is-active .field-group{
  position: relative !important;
  float: none !important;
}

html body.auto-quote-page .quote-step.is-active select, html body.auto-quote-page .quote-step.is-active input, html body.auto-quote-page .quote-step.is-active textarea{
  max-width: 100% !important;
}

/* Keep navigation clearly below the card */
html body.auto-quote-page .quote-step.is-active ~ .form-action-separator{
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
}

html body.auto-quote-page .quote-step.is-active ~ .form-actions{
  position: relative !important;
  clear: both !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 767px){
  html body.auto-quote-page .quote-step.is-active > .step-shell, html body.auto-quote-page .quote-step.is-active .step-shell{
    padding-bottom: 40px !important;
  }

  html body.auto-quote-page .quote-step.is-active .step-shell::after{
    height: 24px !important;
    min-height: 24px !important;
  }

  html body.auto-quote-page .quote-step.is-active ~ .form-action-separator{
    height: 22px !important;
    min-height: 22px !important;
  }
}

/* ===== Smaller Top Progress Bar ===== */












/* =========================================================
   FINAL EXACT CARD + NAVIGATION ALIGNMENT
   ========================================================= */
html body.auto-quote-page{
  --form-card-width: 560px;
}

html body.auto-quote-page .quote-step.is-active{
  width: 100% !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

html body.auto-quote-page .quote-step.is-active > .step-shell{
  width: min(100%, var(--form-card-width)) !important;
  max-width: var(--form-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html body.auto-quote-page .form-action-separator{
  width: min(calc(100% - 36px), var(--form-card-width)) !important;
  max-width: var(--form-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.auto-quote-page .form-actions, html body.auto-quote-page .form-actions:not(.is-single), html body.auto-quote-page .form-actions.is-single{
  display: grid !important;
  width: min(calc(100% - 36px), var(--form-card-width)) !important;
  max-width: var(--form-card-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

html body.auto-quote-page .form-actions:not(.is-single){
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body.auto-quote-page .form-actions.is-single{
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

html body.auto-quote-page .form-actions .btn, html body.auto-quote-page .form-actions.is-single .btn-next{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px){
  html body.auto-quote-page{
    --form-card-width: 100%;
  }

  html body.auto-quote-page .quote-step.is-active{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body.auto-quote-page .form-action-separator, html body.auto-quote-page .form-actions, html body.auto-quote-page .form-actions:not(.is-single), html body.auto-quote-page .form-actions.is-single{
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  html body.auto-quote-page .form-actions:not(.is-single){
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* =========================================================
   BUSINESS FORM VISUAL THEME
   Presentation-only overrides. Form controls and behavior
   remain unchanged.
   ========================================================= */
body.auto-quote-page{
  --accent: #0abab5;
  --accent-dark: #0abab5;
  --text: #2f2f2e;
  --muted: #666;
  --line: #d7dfdc;
  --soft-line: #e8eeeb;
  background: #f4fbfa;
  color: var(--text);
}

body.auto-quote-page .sticky-header{
  height: 70px;
  background: #e60000;
  border: 0;
  box-shadow: 0 1px 10px rgba(0,0,0,.05);
}

body.auto-quote-page .header-container{
  max-width: 1200px;
  padding: 0 24px;
}

body.auto-quote-page .logo-img{ max-height: 32px; }
body.auto-quote-page .header-title{ color: #fff; font-size: 15px; font-weight: 600; }
body.auto-quote-page .header-contact-actions a{ color: #fff; }









body.auto-quote-page .quote-main{
  min-height: 650px;
  background: #f4fbfa;
  padding: 54px 24px 92px;
}

body.auto-quote-page .quote-step{
  min-height: 0;
  padding: 0;
}

body.auto-quote-page .step-shell{
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 40px 50px;
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,63,45,.05);
}
body.auto-quote-page .start-shell, body.auto-quote-page .use-shell, body.auto-quote-page .coverage-shell, body.auto-quote-page .savings-shell, body.auto-quote-page .review-summary-shell, body.auto-quote-page .almost-done-shell, body.auto-quote-page .thank-you-shell{ max-width: 720px; }

body.auto-quote-page .step-shell h1, body.auto-quote-page .step-shell h2{
  margin: 0 0 30px;
  color: #2f2f2e;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.35px;
}
body.auto-quote-page .step-shell h1{ font-size: 32px; }
body.auto-quote-page .subtitle, body.auto-quote-page .intro-copy{ color: #666; }

body.auto-quote-page .field-group{ margin-bottom: 24px; }
body.auto-quote-page .field-group label, body.auto-quote-page .standalone-label, body.auto-quote-page .question-row label{
  color: #333;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

body.auto-quote-page select, body.auto-quote-page input[type="text"], body.auto-quote-page input[type="tel"], body.auto-quote-page input[type="number"], body.auto-quote-page input[type="email"], body.auto-quote-page input[type="date"], body.auto-quote-page textarea{
  width: 100%;
  min-height: 50px;
  border: 1px solid #cfd8d4;
  border-radius: 4px;
  background-color: #fff;
  color: #2f2f2e;
  padding: 0 15px;
  box-shadow: none;
}
body.auto-quote-page textarea{ padding-top: 13px; }
body.auto-quote-page select:focus, body.auto-quote-page input:focus, body.auto-quote-page textarea:focus{
  border-color: #0abab5;
  box-shadow: 0 0 0 3px rgba(51,192,180,.12);
  outline: 0;
}

body.auto-quote-page .segmented{
  border: 1px solid #0abab5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 28px;
}
body.auto-quote-page .segmented label{ border-color: rgba(51,192,180,.55); }
body.auto-quote-page .segmented input:checked + span{ background: #0abab5; }

body.auto-quote-page .radio-card, body.auto-quote-page .history-card, body.auto-quote-page .summary-card, body.auto-quote-page .consent-note-box, body.auto-quote-page .thank-you-card, body.auto-quote-page .vehicle-coverage-options{
  border-color: #e0e8e4;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,63,45,.035);
}
body.auto-quote-page .radio-card:has(input:checked), body.auto-quote-page .summary-source-grid label:has(input:checked){
  border-color: #0abab5;
  background: rgba(51,192,180,.08);
}

body.auto-quote-page .help-icon{
  border-color: #0abab5;
  color: #0abab5;
}
body.auto-quote-page .help-icon:hover{ background: rgba(51,192,180,.1); }

body.auto-quote-page .form-action-separator{ display: none; }
body.auto-quote-page .form-actions{
  width: 100%;
  max-width: 720px;
  margin: 22px auto 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  background: transparent;
  border: 0;
}
body.auto-quote-page .btn{
  min-width: 135px;
  min-height: 48px;
  border-radius: 4px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 15px;
  transition: all .2s ease;
}
body.auto-quote-page .btn-next, body.auto-quote-page .history-add-btn, body.auto-quote-page .summary-add-btn{
  background: #0abab5;
  border-color: #0abab5;
  color: #fff;
}
body.auto-quote-page .btn-next:hover:not(:disabled), body.auto-quote-page .history-add-btn:hover, body.auto-quote-page .summary-add-btn:hover{ background: #0abab5; border-color: #0abab5; }
body.auto-quote-page .btn-back{
  background: #fff;
  border: 1px solid #0abab5;
  color: #0abab5;
}
body.auto-quote-page .btn-back:hover{ background: rgba(51,192,180,.08); }
body.auto-quote-page .btn:disabled{ opacity: .5; cursor: not-allowed; }

body.auto-quote-page .form-footer{ background: #fff; border-top: 1px solid #e4ebe7; }
body.auto-quote-page .footer-container{ max-width: 1100px; }

@media (max-width: 760px){
  body.auto-quote-page .sticky-header{ height: 58px; }
  
  body.auto-quote-page .header-container{ padding: 0 14px; }
  body.auto-quote-page .header-title{ font-size: 13px; padding: 0 8px; }
  body.auto-quote-page .logo-img{ max-height: 27px; }
  
  
  
  body.auto-quote-page .quote-main{ padding: 28px 12px 62px; }
  body.auto-quote-page .step-shell{ padding: 30px 20px 36px; border-radius: 7px; }
  body.auto-quote-page .step-shell h1, body.auto-quote-page .step-shell h2{ font-size: 25px; margin-bottom: 24px; }
  body.auto-quote-page .form-actions{ margin-top: 16px; }
  body.auto-quote-page .btn{ min-width: 0; flex: 1; }
}

@media (max-width: 460px){
  body.auto-quote-page .step-shell{ padding: 25px 15px 30px; }
  body.auto-quote-page .quote-main{ padding-left: 8px; padding-right: 8px; }
  body.auto-quote-page .segmented.three{ grid-template-columns: 1fr; }
  body.auto-quote-page .segmented.three label{ border-right: 0; border-bottom: 1px solid rgba(51,192,180,.45); }
  body.auto-quote-page .segmented.three label:last-child{ border-bottom: 0; }
}

/* =========================================================
   FINAL REFERENCE CARD + BUTTON PLACEMENT
   Navigation is moved into the active .step-shell by JS.
   ========================================================= */
html body.auto-quote-page{
  --reference-card-width: 720px;
  --reference-content-width: 480px;
  --reference-button-width: 240px;
}

html body.auto-quote-page .quote-main{
  padding: 42px 24px 72px !important;
  background: #f4f8f6 !important;
}

html body.auto-quote-page .quote-step, html body.auto-quote-page .quote-step.is-active{
  min-height: 0 !important;
  padding: 0 !important;
}

html body.auto-quote-page .quote-step.is-active > .step-shell{
  width: 100% !important;
  max-width: var(--reference-card-width) !important;
  margin: 0 auto !important;
  padding: 48px 40px !important;
  background: #fff !important;
  border: 1px solid #e4ebe7 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 63, 45, 0.05) !important;
  overflow: visible !important;
}

html body.auto-quote-page .quote-step.is-active > .step-shell > :not(.form-actions):not(.form-action-separator){
  max-width: var(--reference-content-width);
  margin-left: auto;
  margin-right: auto;
}

html body.auto-quote-page .form-action-separator{
  display: block !important;
  width: 100% !important;
  max-width: var(--reference-content-width) !important;
  height: 1px !important;
  margin: 40px auto 24px !important;
  background: #eaeaea !important;
  border: 0 !important;
}

html body.auto-quote-page .form-actions, html body.auto-quote-page .form-actions:not(.is-single), html body.auto-quote-page .form-actions.is-single{
  width: 100% !important;
  max-width: var(--reference-content-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  background: transparent !important;
  border: 0 !important;
}

html body.auto-quote-page .form-actions .btn{
  width: 100% !important;
  max-width: var(--reference-button-width) !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 12px 32px !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body.auto-quote-page .form-actions.is-single .btn-next{
  flex: 0 1 var(--reference-button-width) !important;
  width: var(--reference-button-width) !important;
  max-width: var(--reference-button-width) !important;
}

html body.auto-quote-page .form-actions:not(.is-single) .btn{
  flex: 1 1 0 !important;
}

@media (max-width: 767px){
  html body.auto-quote-page .quote-main{
    padding: 24px 12px 52px !important;
  }

  html body.auto-quote-page .quote-step.is-active > .step-shell{
    max-width: 100% !important;
    padding: 32px 20px !important;
  }

  html body.auto-quote-page .form-action-separator{
    margin-top: 32px !important;
  }

  html body.auto-quote-page .form-actions, html body.auto-quote-page .form-actions:not(.is-single), html body.auto-quote-page .form-actions.is-single{
    gap: 12px !important;
  }

  html body.auto-quote-page .form-actions .btn{
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  html body.auto-quote-page .form-actions.is-single .btn-next{
    width: 100% !important;
    max-width: 240px !important;
  }
}

/* =========================================================
   FINAL FIX: coverage alignment + thin action divider
   ========================================================= */
html body.auto-quote-page .quote-step.is-active > .step-shell > .vehicle-coverage-options{
  width: 100% !important;
  max-width: var(--reference-content-width, 480px) !important;
  margin: 36px auto 0 !important;
  padding: 30px 0 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-top: 1px solid #edf1ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.auto-quote-page .vehicle-coverage-options .summary-card-head, html body.auto-quote-page .vehicle-coverage-options .summary-checkbox-list{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html body.auto-quote-page .vehicle-coverage-options .summary-card-head h3{
  margin: 0 0 6px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #1f2933 !important;
}

html body.auto-quote-page .vehicle-coverage-options .summary-card-head p{
  margin: 0 0 24px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #66736d !important;
}

html body.auto-quote-page .form-action-separator{
  display: block !important;
  width: 100% !important;
  max-width: var(--reference-content-width, 480px) !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: 40px auto 24px !important;
  padding: 0 !important;
  border: 0 !important;
  background: #edf1ef !important;
  box-shadow: none !important;
  overflow: hidden !important;
  flex: 0 0 1px !important;
}

@media (max-width: 767px){
  html body.auto-quote-page .quote-step.is-active > .step-shell > .vehicle-coverage-options{
    max-width: 100% !important;
    margin-top: 30px !important;
    padding-top: 24px !important;
  }

  html body.auto-quote-page .form-action-separator{
    max-width: 100% !important;
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    margin: 32px auto 20px !important;
  }
}

/* ===== Stable layout for tickets, suspensions and claims ===== */
body.auto-quote-page .driving-history-shell, body.auto-quote-page .claims-history-shell{
  width: 100%;
  max-width: 620px;
  box-sizing: border-box;
}

body.auto-quote-page .driving-history-step .history-card, body.auto-quote-page .claims-history-step .history-card{
  width: 100%;
  max-width: 100%;
  margin: 32px 0;
  transform: none;
  padding: 32px;
  box-sizing: border-box;
  overflow: visible;
}

body.auto-quote-page .driving-history-step .history-card .field-group, body.auto-quote-page .claims-history-step .history-card .field-group{
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.auto-quote-page .driving-history-step .history-card select, body.auto-quote-page .claims-history-step .history-card select, body.auto-quote-page .driving-history-step .history-card input, body.auto-quote-page .claims-history-step .history-card input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.auto-quote-page .driving-history-step .history-date-row, body.auto-quote-page .claims-history-step .history-date-row{
  width: 100%;
  gap: 18px;
}

body.auto-quote-page .driving-history-step .history-add-btn, body.auto-quote-page .claims-history-step .history-add-btn{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 720px){
  body.auto-quote-page .driving-history-step .history-card, body.auto-quote-page .claims-history-step .history-card{
    margin: 24px 0;
    padding: 28px 20px 32px;
  }

  body.auto-quote-page .driving-history-step .history-date-row, body.auto-quote-page .claims-history-step .history-date-row{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* Google Places address suggestions must stay above the quote form. */
.auto-quote-page .pac-container{ z-index: 2147483647 !important; font-family: inherit; }
.auto-quote-page .pac-item{ cursor: pointer; padding: 8px 10px; }

/* Google Places address suggestions must stay above the quote form. */
.auto-quote-page .pac-container{
  z-index: 2147483647 !important;
  font-family: Arial, sans-serif !important;
}


/* Address select hone ke baad Google suggestions dropdown turant hide ho. */
body.auto-quote-page.car-test-pac-closed .pac-container{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Thank-you action */
.auto-quote-page .start-new-quote-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  margin: 26px auto 0;
  padding: 14px 28px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.auto-quote-page .start-new-quote-btn:hover{ background: var(--accent-dark); }

/* Licence class-specific fields */
.auto-quote-page .license-class-fields{
  margin-top: 20px;
}
.auto-quote-page .license-class-fields .license-age-field,
.auto-quote-page .license-class-fields .license-month-field{
  display: block;
}
.auto-quote-page .license-class-fields .license-month-field{
  margin-top: 18px;
}


/* ===== Final overrides: consent copy + stage icons matching site style ===== */
body.auto-quote-page .quote-main{
  padding-top: 40px;
}































body.auto-quote-page .consent-note-box{
  background: #eef8f8;
  border: 1px solid #d7eeee;
  padding: 26px 28px 28px;
}
body.auto-quote-page .consent-note-box .consent-title{
  margin: 0 0 10px;
  color: #1e2a2f;
  font-size: 29px;
  line-height: 1.2;
  font-weight: 700;
}
body.auto-quote-page .consent-note-box .consent-intro{
  margin: 0 0 22px;
  color: #42515a;
  font-size: 16px;
  line-height: 1.55;
}
body.auto-quote-page .consent-note-box .agree-check{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0;
}
body.auto-quote-page .consent-note-box .agree-check input{
  width: 30px;
  height: 30px;
}
body.auto-quote-page .consent-note-box .note-divider{
  margin: 22px 0 20px;
}
body.auto-quote-page .consent-note-box p{
  margin: 0 0 18px;
  color: #27343b;
  font-size: 15px;
  line-height: 1.75;
}
body.auto-quote-page .consent-note-box p:last-child{
  margin-bottom: 0;
}

@media (max-width: 760px){
  
  
  
  
  
  
  
  body.auto-quote-page .consent-note-box{
    padding: 20px 18px 22px;
  }
  body.auto-quote-page .consent-note-box .consent-title{
    font-size: 24px;
  }
  body.auto-quote-page .consent-note-box .consent-intro,
  body.auto-quote-page .consent-note-box p{
    font-size: 14px;
  }
}


/* ===== Final overrides: review page closer to provided screenshot ===== */
body.auto-quote-page .review-summary-shell{
  max-width: 980px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.auto-quote-page .review-summary-step h2{
  margin: 0 0 32px;
  text-align: center;
  color: #202124;
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 700;
}

body.auto-quote-page .summary-top-actions,
body.auto-quote-page .summary-note{
  display: none;
}

body.auto-quote-page .summary-card{
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(31,41,55,.04);
  padding: 0;
  margin: 0 0 24px;
  overflow: hidden;
}

body.auto-quote-page .summary-card-head{
  padding: 28px 28px 16px;
}

body.auto-quote-page .summary-card-head h3{
  margin: 0 0 12px;
  color: #202124;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
}

body.auto-quote-page .summary-card-head p{
  margin: 0;
  color: #5f6368;
  font-size: 15px;
  line-height: 1.6;
}

body.auto-quote-page .summary-list{
  border-top: 1px solid #eceff1;
}

body.auto-quote-page .summary-row{
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 76px;
  padding: 0 28px;
  border-bottom: 1px solid #eceff1;
}
body.auto-quote-page .summary-row:last-child{
  border-bottom: 0;
}

body.auto-quote-page .summary-row-icon{
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #111;
}

body.auto-quote-page .summary-row-main{
  display: block;
  min-width: 0;
  padding: 18px 0;
}

body.auto-quote-page .summary-row-main strong{
  display: block;
  margin: 0;
  color: #111;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
}

body.auto-quote-page .summary-row-main span{
  display: block;
  margin-top: 4px;
  color: #74797f;
  font-size: 13px;
  line-height: 1.45;
}

body.auto-quote-page .summary-change{
  border: 0;
  background: transparent;
  color: #ed1c24;
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  white-space: nowrap;
}
body.auto-quote-page .summary-change:hover{
  text-decoration: underline;
}

body.auto-quote-page .summary-empty{
  padding: 22px 28px 28px;
  color: #6b7280;
  font-size: 15px;
}

body.auto-quote-page .summary-extra-card{
  margin-top: 16px;
}

body.auto-quote-page .summary-source-grid{
  padding: 0 28px 28px;
}

@media (max-width: 900px){
  body.auto-quote-page .review-summary-step h2{
    font-size: 42px;
    letter-spacing: -.8px;
  }
}

@media (max-width: 760px){
  body.auto-quote-page .review-summary-shell{
    max-width: 100%;
  }
  body.auto-quote-page .review-summary-step h2{
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: 22px;
  }
  body.auto-quote-page .summary-card{
    border-radius: 14px;
  }
  body.auto-quote-page .summary-card-head{
    padding: 22px 18px 14px;
  }
  body.auto-quote-page .summary-card-head h3{
    font-size: 22px;
    margin-bottom: 10px;
  }
  body.auto-quote-page .summary-card-head p{
    font-size: 14px;
  }
  body.auto-quote-page .summary-row{
    grid-template-columns: 28px 1fr auto;
    gap: 12px;
    min-height: 68px;
    padding: 0 18px;
  }
  body.auto-quote-page .summary-row-main strong{
    font-size: 17px;
  }
  body.auto-quote-page .summary-row-main span{
    font-size: 12px;
  }
  body.auto-quote-page .summary-source-grid{
    padding: 0 18px 20px;
  }
}


/* ===== Final overrides: bundle home/tenant promo ===== */
body.auto-quote-page .address-quote-question{
  margin-top: 30px;
}

body.auto-quote-page .bundle-promo-card{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
  margin: 0 0 22px;
  padding: 22px 24px;
  border: 1px solid #f4d6d8;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8f8 0%, #fff 100%);
  box-shadow: 0 8px 24px rgba(237, 28, 36, 0.06);
}

body.auto-quote-page .bundle-promo-visual{
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

body.auto-quote-page .bundle-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
body.auto-quote-page .bundle-icon-car{
  background: linear-gradient(135deg, #ed1c24, #ff5a61);
}
body.auto-quote-page .bundle-icon-home{
  background: linear-gradient(135deg, #20bfb4, #51d4cb);
}
body.auto-quote-page .bundle-plus{
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  color: #606770;
}

body.auto-quote-page .bundle-promo-badge{
  display: inline-block;
  margin: 0 0 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ed1c24;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

body.auto-quote-page .bundle-promo-copy h3{
  margin: 0 0 8px;
  color: #1f2328;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}

body.auto-quote-page .bundle-promo-copy p{
  margin: 0;
  color: #5f6368;
  font-size: 15px;
  line-height: 1.6;
}

body.auto-quote-page .address-quote-question .address-quote-title{
  margin: 0 0 6px;
  color: #1f2328;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
}

body.auto-quote-page .address-quote-question .address-quote-subtitle{
  margin: 0 0 18px;
  color: #5f6368;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}

body.auto-quote-page .address-choice span{
  min-height: 58px;
  font-weight: 600;
}

body.auto-quote-page .address-consent-box{
  margin: 22px 0 20px;
  border-radius: 12px;
  border: 1px solid #d8efee;
}

@media (max-width: 760px){
  body.auto-quote-page .bundle-promo-card{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  body.auto-quote-page .bundle-promo-visual{
    min-height: 80px;
  }
  body.auto-quote-page .bundle-promo-copy h3{
    font-size: 22px;
  }
  body.auto-quote-page .address-quote-question .address-quote-title{
    font-size: 19px;
  }
}


/* ===== Mobile fix: tickets, suspensions and claims ===== */
@media (max-width: 768px){
  html, body.auto-quote-page{
    max-width: 100%;
    overflow-x: hidden;
  }

  body.auto-quote-page .driving-history-step .driving-history-shell,
  body.auto-quote-page .claims-history-step .claims-history-shell{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.auto-quote-page .driving-history-step h2,
  body.auto-quote-page .claims-history-step h2{
    margin-bottom: 30px !important;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }

  body.auto-quote-page .driving-history-step .driving-question-block,
  body.auto-quote-page .claims-history-step .claims-question-block{
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 32px !important;
  }

  body.auto-quote-page .driving-history-step .question-row,
  body.auto-quote-page .claims-history-step .question-row,
  body.auto-quote-page .driving-history-step .compact-help-row,
  body.auto-quote-page .claims-history-step .compact-help-row{
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: start !important;
    gap: 10px !important;
  }

  body.auto-quote-page .driving-history-step .question-row label,
  body.auto-quote-page .claims-history-step .question-row label,
  body.auto-quote-page .driving-history-step .history-card label,
  body.auto-quote-page .claims-history-step .history-card label,
  body.auto-quote-page .driving-history-step .history-card-label,
  body.auto-quote-page .claims-history-step .history-card-label{
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  body.auto-quote-page .driving-history-step .help-icon,
  body.auto-quote-page .claims-history-step .help-icon{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
  }

  body.auto-quote-page .driving-history-step .segmented.two,
  body.auto-quote-page .claims-history-step .segmented.two{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  body.auto-quote-page .driving-history-step .segmented.two label,
  body.auto-quote-page .claims-history-step .segmented.two label{
    min-width: 0 !important;
    border-bottom: 0 !important;
  }

  body.auto-quote-page .driving-history-step .segmented.two span,
  body.auto-quote-page .claims-history-step .segmented.two span{
    min-height: 50px !important;
    padding: 11px 8px !important;
  }

  body.auto-quote-page .driving-history-step .history-card,
  body.auto-quote-page .claims-history-step .history-card{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 22px 0 !important;
    transform: none !important;
    padding: 50px 16px 24px !important;
    border: 1px solid #d8ecea !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.auto-quote-page .driving-history-step .history-card h3,
  body.auto-quote-page .claims-history-step .history-card h3{
    margin: 0 42px 24px 0 !important;
    text-align: left !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  body.auto-quote-page .driving-history-step .history-card-close,
  body.auto-quote-page .claims-history-step .history-card-close{
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 6px !important;
    font-size: 25px !important;
    line-height: 28px !important;
    z-index: 2;
  }

  body.auto-quote-page .driving-history-step .history-card .field-group,
  body.auto-quote-page .claims-history-step .history-card .field-group{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
  }

  body.auto-quote-page .driving-history-step .history-card select,
  body.auto-quote-page .claims-history-step .history-card select,
  body.auto-quote-page .driving-history-step .history-card input,
  body.auto-quote-page .claims-history-step .history-card input{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 50px !important;
    padding-left: 12px !important;
    padding-right: 38px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  body.auto-quote-page .driving-history-step .history-date-row,
  body.auto-quote-page .claims-history-step .history-date-row{
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  body.auto-quote-page .driving-history-step .history-date-row .field-group,
  body.auto-quote-page .claims-history-step .history-date-row .field-group{
    margin-bottom: 14px !important;
  }

  body.auto-quote-page .driving-history-step .history-add-btn,
  body.auto-quote-page .claims-history-step .history-add-btn{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 0 34px !important;
    padding: 11px 14px !important;
    border-radius: 6px !important;
    font-size: 17px !important;
    box-sizing: border-box !important;
  }

  body.auto-quote-page .driving-history-step .suspension-question{
    margin-top: 38px !important;
  }
}

@media (max-width: 380px){
  body.auto-quote-page .driving-history-step .driving-history-shell,
  body.auto-quote-page .claims-history-step .claims-history-shell{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.auto-quote-page .driving-history-step .history-card,
  body.auto-quote-page .claims-history-step .history-card{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ===== Suspension reason/year fields ===== */
body.auto-quote-page .suspension-question + .history-card input[name="suspension_reason[]"]{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 720px){
  body.auto-quote-page .driving-history-step .history-card input[name="suspension_reason[]"]{
    padding-right: 12px !important;
  }
}


/* ===== v8: mobile consent checkbox alignment ===== */
body.auto-quote-page .consent-note-box .agree-check{
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
body.auto-quote-page .consent-note-box .agree-check input{
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
}
body.auto-quote-page .consent-note-box .agree-check span{
  display: inline-block !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
}

@media (max-width: 760px){
  body.auto-quote-page .almost-done-shell{
    padding: 28px 18px 34px !important;
  }
  body.auto-quote-page .almost-done-step h2{
    margin-bottom: 24px !important;
    font-size: 29px !important;
    line-height: 1.18 !important;
  }
  body.auto-quote-page .consent-note-box{
    padding: 20px 17px 22px !important;
    border-radius: 10px !important;
  }
  body.auto-quote-page .consent-note-box .consent-title{
    margin-bottom: 10px !important;
    font-size: 23px !important;
    line-height: 1.18 !important;
    letter-spacing: -.2px !important;
  }
  body.auto-quote-page .consent-note-box .consent-intro{
    margin-bottom: 18px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  body.auto-quote-page .consent-note-box .agree-check{
    gap: 10px !important;
  }
  body.auto-quote-page .consent-note-box .agree-check input{
    flex-basis: 27px !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
  }
  body.auto-quote-page .consent-note-box .agree-check span{
    font-size: 17px !important;
  }
  body.auto-quote-page .consent-note-box .note-divider{
    margin: 18px 0 !important;
  }
  body.auto-quote-page .consent-note-box p{
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}


/* ===== Final overrides: phone validation ===== */
body.auto-quote-page input[type="tel"].has-error{
  border-color: #c60000 !important;
  box-shadow: 0 0 0 2px rgba(198, 0, 0, .08) !important;
}
body.auto-quote-page .phone-error{
  margin-top: 8px;
  font-size: 13px;
}


/* ===== Home/Tenant insurance history question ===== */
body.auto-quote-page .past-home-tenant-insurance-block{
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e1e7e5;
}
body.auto-quote-page .address-quote-question .past-insurance-title{
  font-size: 19px;
  margin-bottom: 6px;
}
body.auto-quote-page .past-home-tenant-insurance-block .segmented{
  margin-bottom: 0;
}
@media (max-width: 760px){
  body.auto-quote-page .past-home-tenant-insurance-block{
    margin-top: 20px;
    padding-top: 20px;
  }
  body.auto-quote-page .address-quote-question .past-insurance-title{
    font-size: 18px;
  }
}

/* ===== v11: simplified claims + optional notes ===== */
body.auto-quote-page .claim-count-block{
  margin-top: 8px;
  padding: 22px 24px;
  border: 1px solid #dce7e4;
  border-radius: 12px;
  background: #f8fbfa;
}
body.auto-quote-page .claim-count-block label{
  display: block;
  margin-bottom: 10px;
  color: #26352f;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}
body.auto-quote-page .claim-count-block input[type="number"]{
  max-width: 260px;
}
body.auto-quote-page .claim-count-block .field-help-text{
  margin: 8px 0 0;
}

body.auto-quote-page .quote-notes-card .optional-label{
  color: #74797f;
  font-size: .65em;
  font-weight: 500;
}
body.auto-quote-page .quote-notes-field{
  padding: 0 28px 28px;
}
body.auto-quote-page .quote-notes-field textarea{
  display: block;
  width: 100%;
  min-height: 135px;
  resize: vertical;
  line-height: 1.55;
}
body.auto-quote-page .quote-notes-field .field-help-text{
  margin: 8px 0 0;
  color: #74797f;
  font-size: 12px;
}
body.auto-quote-page .sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 760px){
  body.auto-quote-page .claim-count-block{
    padding: 18px 16px;
  }
  body.auto-quote-page .claim-count-block input[type="number"]{
    max-width: none;
    width: 100%;
  }
  body.auto-quote-page .quote-notes-field{
    padding: 0 18px 22px;
  }
  body.auto-quote-page .quote-notes-field textarea{
    min-height: 120px;
  }
}

/* ===== v12: exact Vehicle > Driver > Review > Quote icon flow ===== */












@media (max-width: 760px){
  body.auto-quote-page .sticky-header{
    height: 72px !important;
  }
  body.auto-quote-page .header-container{
    height: 72px !important;
    padding: 0 20px !important;
  }
  body.auto-quote-page .header-title{
    display: none !important;
  }
  body.auto-quote-page .logo-img{
    max-height: 33px !important;
    width: auto !important;
  }
  body.auto-quote-page .header-contact-actions{
    margin-left: auto !important;
    gap: 19px !important;
  }
  body.auto-quote-page .header-contact-actions .phone-number{
    display: none !important;
  }
  body.auto-quote-page .header-contact-link i{
    display: inline-block !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }
  
  
  
  
  
  
  
  
  
  body.auto-quote-page .quote-main{
    padding-top: 34px !important;
  }
}

@media (max-width: 390px){
  body.auto-quote-page .header-container{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  
  
  
}


/* ===== Matched help popup content and coverage help controls ===== */
body.auto-quote-page .coverage-option-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: start;
  width: 100%;
}

body.auto-quote-page .coverage-option-row > label{
  min-width: 0;
}

body.auto-quote-page .coverage-help-icon{
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-top: 1px;
  font-size: 13px;
}

body.auto-quote-page .help-content{
  color: #36423e;
  font-size: 15px;
  line-height: 1.65;
}

body.auto-quote-page .help-content p{
  margin: 0 0 14px;
}

body.auto-quote-page .help-content p:last-child{
  margin-bottom: 0;
}

body.auto-quote-page .help-content ul{
  margin: 8px 0 14px;
  padding-left: 22px;
}

body.auto-quote-page .help-content li{
  margin: 0 0 7px;
}

@media (max-width: 560px){
  body.auto-quote-page .coverage-option-row{
    grid-template-columns: minmax(0, 1fr) 26px;
    gap: 8px;
  }

  body.auto-quote-page .help-content{
    font-size: 14px;
    line-height: 1.6;
  }
}


/* ===== v15: load and show the supplied SVG stage icons ===== */












/* ===== v16: compact stage bar; show only active/completed steps ===== */












/* Keep grid spacing, but hide all future step icons and labels. */




@media (max-width: 760px){
  

  

  

  

  body.auto-quote-page .quote-main{
    padding-top: 22px !important;
  }
}



/* ===== v17: show round stage borders; reveal icons only when active/completed ===== */




/* Future steps: keep the circle visible, but hide the artwork inside it. */




/* Active and completed steps show their supplied SVG icon. */


/* Keep all step labels visible below the round indicators. */











/* ===== v19: multiple drivers and vehicles on one quote ===== */
body.auto-quote-page .review-summary-step .summary-top-actions{
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
  flex-wrap: wrap;
}
body.auto-quote-page .review-summary-step .summary-add-btn{
  min-width: 180px;
  min-height: 48px;
  padding: 11px 22px;
  border: 1px solid #ed1c24;
  border-radius: 8px;
  background: #fff;
  color: #ed1c24;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}
body.auto-quote-page .review-summary-step .summary-add-btn:hover{
  background: #ed1c24;
  color: #fff;
}
@media (max-width: 620px){
  body.auto-quote-page .review-summary-step .summary-top-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body.auto-quote-page .review-summary-step .summary-add-btn{
    min-width: 0;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
}
@media (max-width:768px){

  .auto-quote-page .radio-card,
  .auto-quote-page .radio-card label,
  .auto-quote-page .radio-card span{
      display:flex !important;
      justify-content:flex-start !important;
      align-items:center !important;
      text-align:left !important;
      direction:ltr !important;
  }

  .auto-quote-page .radio-card span{
      padding-left:65px !important;
      padding-right:15px !important;
      width:100% !important;
  }
}

/* ===== Requested mobile/UI refinements ===== */
/* Keep every progress icon visible: completed/current are crisp, upcoming are softly faded. */





/* Clean white help popup with the site's blue accent border. */
body.auto-quote-page .help-popup{
  background: rgba(12, 25, 35, .48) !important;
  backdrop-filter: blur(3px);
}
body.auto-quote-page .help-box{
  background: #fff !important;
  color: #263b45 !important;
  border: 2px solid #2f91c4 !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(18, 54, 73, .24) !important;
}
body.auto-quote-page .help-box h3{
  color: #174f6d !important;
  padding-right: 44px;
}
body.auto-quote-page .help-box p,
body.auto-quote-page .help-content{
  color: #364b56 !important;
}
body.auto-quote-page .help-close{
  background: #eef8fd !important;
  color: #247da9 !important;
  border: 1px solid #8bc5e1 !important;
}
body.auto-quote-page .help-close:hover{
  background: #dff2fb !important;
}

/* During additional entries, hide fields whose information is already on file. */
body.auto-quote-page form.is-adding-vehicle .first-page-contact-field{
  display: none !important;
}
body.auto-quote-page form.is-adding-driver .quote-for-field,
body.auto-quote-page form.is-adding-driver .driver-someone-fields .field-group:has(#quoteMobilePhone),
body.auto-quote-page form.is-adding-driver .email-field{
  display: none !important;
}
body.auto-quote-page form.is-adding-driver .driver-someone-fields{
  display: block !important;
}

@media (max-width: 768px){
  body.auto-quote-page .summary-extra-card .summary-card-head,
  body.auto-quote-page .summary-extra-card .summary-card-head > div,
  body.auto-quote-page .summary-extra-card .summary-card-head h3,
  body.auto-quote-page .summary-extra-card .summary-card-head p{
    text-align: left !important;
  }
  body.auto-quote-page .summary-source-grid label{
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 16px !important;
  }
  body.auto-quote-page .summary-source-grid label span{
    flex: 1 1 auto !important;
    text-align: left !important;
  }
  body.auto-quote-page .summary-source-grid input[type="radio"]{
    order: 0 !important;
  }
  
  body.auto-quote-page .help-box{
    width: calc(100% - 28px) !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    padding: 24px 20px !important;
  }
}


/* ===== v20: progress artwork, iOS focus zoom, and consent placement ===== */
/* All four supplied SVG artworks remain visible. Upcoming stages are faded, not empty. */




/* iOS Safari zooms focused controls below 16px. Keep controls at 16px on phones. */
@media (max-width: 768px){
  html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body.auto-quote-page input,
  body.auto-quote-page select,
  body.auto-quote-page textarea,
  body.auto-quote-page button{
    font-size: 16px !important;
  }
  body.auto-quote-page .quote-form,
  body.auto-quote-page .quote-step,
  body.auto-quote-page .step-shell{
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.auto-quote-page input,
  body.auto-quote-page select,
  body.auto-quote-page textarea{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Consent now lives at the end of the page immediately before Review. */
body.auto-quote-page .claims-contd-step .consent-note-box{
  margin-top: 30px;
}

/* ===== v21: stable mobile layout for driver history steps ===== */
@media (max-width: 768px){
  body.auto-quote-page .claims-history-step.is-active > .step-shell,
  body.auto-quote-page .claims-contd-step.is-active > .step-shell{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.auto-quote-page .claims-history-step .claims-history-shell,
  body.auto-quote-page .claims-contd-step .claims-contd-shell{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.auto-quote-page .claims-history-step .claims-question-block,
  body.auto-quote-page .claims-contd-step .claims-question-block,
  body.auto-quote-page .claims-contd-step .field-group{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.auto-quote-page .claims-history-step h2,
  body.auto-quote-page .claims-contd-step h2{
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  body.auto-quote-page .claims-history-step .form-actions,
  body.auto-quote-page .claims-contd-step .form-actions{
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}


/* ===== v22: hard mobile viewport lock for Tickets + Claims =====
   Prevent any dynamically-added history card, long option or browser focus
   from widening/shrinking the responsive viewport. */
@media (max-width: 768px){
  html{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
  body.auto-quote-page{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }
  body.auto-quote-page .quote-form,
  body.auto-quote-page .quote-step,
  body.auto-quote-page .quote-step.is-active,
  body.auto-quote-page .driving-history-step,
  body.auto-quote-page .claims-history-step,
  body.auto-quote-page .claims-contd-step,
  body.auto-quote-page .driving-history-step > .step-shell,
  body.auto-quote-page .claims-history-step > .step-shell,
  body.auto-quote-page .claims-contd-step > .step-shell,
  body.auto-quote-page .driving-history-shell,
  body.auto-quote-page .claims-history-shell,
  body.auto-quote-page .claims-contd-shell{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    transform: none !important;
  }
  body.auto-quote-page .driving-history-step > .step-shell,
  body.auto-quote-page .claims-history-step > .step-shell,
  body.auto-quote-page .claims-contd-step > .step-shell{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.auto-quote-page .driving-history-step *,
  body.auto-quote-page .claims-history-step *,
  body.auto-quote-page .claims-contd-step *{
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.auto-quote-page .driving-history-step .question-row,
  body.auto-quote-page .claims-history-step .question-row,
  body.auto-quote-page .claims-contd-step .question-row,
  body.auto-quote-page .driving-history-step .segmented,
  body.auto-quote-page .claims-history-step .segmented,
  body.auto-quote-page .claims-contd-step .segmented,
  body.auto-quote-page .driving-history-step .history-card,
  body.auto-quote-page .claims-history-step .history-card,
  body.auto-quote-page .claims-contd-step .history-card,
  body.auto-quote-page .driving-history-step .form-actions,
  body.auto-quote-page .claims-history-step .form-actions,
  body.auto-quote-page .claims-contd-step .form-actions{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  body.auto-quote-page .driving-history-step select,
  body.auto-quote-page .claims-history-step select,
  body.auto-quote-page .claims-contd-step select,
  body.auto-quote-page .driving-history-step input,
  body.auto-quote-page .claims-history-step input,
  body.auto-quote-page .claims-contd-step input,
  body.auto-quote-page .driving-history-step textarea,
  body.auto-quote-page .claims-history-step textarea,
  body.auto-quote-page .claims-contd-step textarea,
  body.auto-quote-page .driving-history-step button,
  body.auto-quote-page .claims-history-step button,
  body.auto-quote-page .claims-contd-step button{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
  body.auto-quote-page .driving-history-step select,
  body.auto-quote-page .claims-history-step select,
  body.auto-quote-page .claims-contd-step select{
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.auto-quote-page .driving-history-step .segmented label,
  body.auto-quote-page .claims-history-step .segmented label,
  body.auto-quote-page .claims-contd-step .segmented label{
    width: auto !important;
    min-width: 0 !important;
  }
  body.auto-quote-page .driving-history-step .segmented label span,
  body.auto-quote-page .claims-history-step .segmented label span,
  body.auto-quote-page .claims-contd-step .segmented label span{
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  body.auto-quote-page .driving-history-step .form-actions button,
  body.auto-quote-page .claims-history-step .form-actions button,
  body.auto-quote-page .claims-contd-step .form-actions button{
    width: auto !important;
  }
}
/* Home-specific content only. Core layout/design remains inherited from the car form files. */
.home-type-tabs{margin:22px 0 34px}.home-section-title{margin:36px 0 22px;text-align:center}.home-section-title h2{font-size:25px;font-weight:600;color:#089895}.home-note{background:#f4fbfa;padding:18px 20px;margin-top:26px;line-height:1.55}.home-address-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.home-address-grid .wide{grid-column:1/-1}.conditional-block{display:none}.conditional-block.is-visible{display:block}.quote-step .step-shell{max-width:720px}.home-form .standalone-label{margin-top:28px}.home-form .segmented{margin-bottom:26px}.home-form .field-group{margin-bottom:22px}.home-form input[readonly]{background:#f4f4f4}.home-form .intro-copy{text-align:center}.home-form .start-shell h1{text-align:center}.home-complete{text-align:center;padding:20px 0}.home-complete .thank-you-icon{margin:0 auto 18px}.form-footer .footer-support-message .footer-message-line2{white-space:normal}@media(max-width:700px){.home-address-grid{grid-template-columns:1fr}.home-address-grid .wide{grid-column:auto}.home-type-tabs .segmented.three{grid-template-columns:1fr}.home-type-tabs .segmented label span{min-height:52px}.home-section-title{margin-top:28px}}

/* Final action-area fix: separator and buttons stay inside the same white card. */
body.auto-quote-page .quote-form.home-form{
  width:min(100%,720px) !important;
  max-width:720px !important;
  margin:0 auto !important;
  background:#fff !important;
  border:1px solid #e2ebe7 !important;
  border-radius:12px !important;
  box-shadow:0 10px 30px rgba(25,58,49,.07) !important;
  overflow:hidden !important;
}

body.auto-quote-page .home-form .step-shell,
body.auto-quote-page .home-form .step-shell.start-shell,
body.auto-quote-page .home-form .step-shell.thank-you-shell{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:46px 44px 34px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

body.auto-quote-page .home-form .form-action-separator{
  position:static !important;
  left:auto !important;
  width:calc(100% - 88px) !important;
  height:1px !important;
  margin:0 44px 30px !important;
  background:#d7dfdc !important;
}

body.auto-quote-page .home-form .form-actions,
body.auto-quote-page .home-form .form-actions:not(.is-single),
body.auto-quote-page .home-form .form-actions.is-single{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 44px 44px !important;
  box-sizing:border-box !important;
}

body.auto-quote-page .home-form .form-actions.is-single{
  display:flex !important;
  justify-content:center !important;
}

body.auto-quote-page .home-form .form-actions.is-single .btn-next{
  width:min(100%,360px) !important;
  max-width:360px !important;
  flex:0 1 360px !important;
}

@media(max-width:767px){
  body.auto-quote-page .quote-form.home-form{
    width:100% !important;
    border-radius:10px !important;
  }
  body.auto-quote-page .home-form .step-shell,
  body.auto-quote-page .home-form .step-shell.start-shell,
  body.auto-quote-page .home-form .step-shell.thank-you-shell{
    padding:30px 18px 28px !important;
  }
  body.auto-quote-page .home-form .form-action-separator{
    width:calc(100% - 36px) !important;
    margin:0 18px 24px !important;
  }
  body.auto-quote-page .home-form .form-actions,
  body.auto-quote-page .home-form .form-actions:not(.is-single),
  body.auto-quote-page .home-form .form-actions.is-single{
    padding:0 18px 30px !important;
  }
}

/* ===== FINAL HOME FORM CARD/ACTION LAYOUT ===== */
html body.auto-quote-page main.quote-main {
  width: 100%;
  padding: 0 18px 92px;
  box-sizing: border-box;
}

html body.auto-quote-page form.quote-form.home-form {
  display: block !important;
  width: min(100%, 930px) !important;
  max-width: 930px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #dfe8e4 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(24, 57, 48, .08) !important;
  overflow: hidden !important;
}

html body.auto-quote-page .home-form .quote-step {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html body.auto-quote-page .home-form .quote-step.is-active > .step-shell,
html body.auto-quote-page .home-form .quote-step.is-active .step-shell,
html body.auto-quote-page .home-form .step-shell,
html body.auto-quote-page .home-form .step-shell.start-shell,
html body.auto-quote-page .home-form .step-shell.thank-you-shell {
  display: block !important;
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 48px 44px 34px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Prevent legacy CSS from visually moving navigation outside the card. */
html body.auto-quote-page .home-form .step-shell::after,
html body.auto-quote-page .home-form .form-actions::before {
  display: none !important;
  content: none !important;
}

html body.auto-quote-page .home-form .form-action-separator {
  display: block !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  width: calc(100% - 88px) !important;
  max-width: 842px !important;
  height: 1px !important;
  margin: 0 44px 30px !important;
  padding: 0 !important;
  background: #d7dfdc !important;
  border: 0 !important;
  transform: none !important;
}

html body.auto-quote-page .home-form .form-actions,
html body.auto-quote-page .home-form .form-actions:not(.is-single),
html body.auto-quote-page .home-form .form-actions.is-single {
  position: static !important;
  inset: auto !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 44px 44px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  transform: none !important;
  align-items: center !important;
}

html body.auto-quote-page .home-form .form-actions:not(.is-single) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
}

html body.auto-quote-page .home-form .form-actions.is-single {
  display: flex !important;
  justify-content: center !important;
}

html body.auto-quote-page .home-form .form-actions.is-single .btn-back {
  display: none !important;
}

html body.auto-quote-page .home-form .form-actions.is-single .btn-next {
  display: block !important;
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  flex: 0 1 360px !important;
  margin: 0 auto !important;
}

html body.auto-quote-page .home-form .form-actions:not(.is-single) .btn {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html body.auto-quote-page .home-form .thank-you-step.is-active ~ .form-action-separator,
html body.auto-quote-page .home-form .thank-you-step.is-active ~ .form-actions {
  display: none !important;
}

@media (max-width: 767px) {
  html body.auto-quote-page main.quote-main {
    padding: 0 10px 60px;
  }
  html body.auto-quote-page form.quote-form.home-form {
    width: 100% !important;
    border-radius: 8px !important;
  }
  html body.auto-quote-page .home-form .quote-step.is-active > .step-shell,
  html body.auto-quote-page .home-form .quote-step.is-active .step-shell,
  html body.auto-quote-page .home-form .step-shell,
  html body.auto-quote-page .home-form .step-shell.start-shell,
  html body.auto-quote-page .home-form .step-shell.thank-you-shell {
    width: 100% !important;
    padding: 30px 18px 26px !important;
  }
  html body.auto-quote-page .home-form .form-action-separator {
    width: calc(100% - 36px) !important;
    margin: 0 18px 24px !important;
  }
  html body.auto-quote-page .home-form .form-actions,
  html body.auto-quote-page .home-form .form-actions:not(.is-single),
  html body.auto-quote-page .home-form .form-actions.is-single {
    padding: 0 18px 30px !important;
  }
  html body.auto-quote-page .home-form .form-actions:not(.is-single) {
    grid-template-columns: 1fr !important;
  }
  html body.auto-quote-page .home-form .form-actions.is-single .btn-next {
    width: 100% !important;
    max-width: 360px !important;
  }
}


/* final blue theme overrides */
:root{--primary-color:#0b3b82!important;--primary-hover:#0b3b82!important;--profession-accent:#0b3b82!important;--primary-light:#e8f0fb!important;}
.form-actions{display:flex!important;gap:0!important;}
.form-actions .btn{width:50%!important;}
.btn-next{background:#0b3b82!important;color:#fff!important;}
.btn-back{background:#e8f0fb!important;color:#0b3b82!important;}
.home-note{background:#e8f0fb!important;color:#17375e!important;}

/* final requested adjustments */
.auto-quote-page #step-1, .auto-quote-page .quote-step[data-step="1"]{background:linear-gradient(90deg,#0abab5 50%, #eef7f7 50%);}
.auto-quote-page .form-actions{display:flex;justify-content:center;gap:18px;}
.auto-quote-page .form-actions .btn{width:160px!important;max-width:160px!important;padding:12px 20px;}

/* coverage date step */
.date-grid{display:flex;gap:14px;justify-content:center;margin:45px auto 70px}.date-grid .field-group{width:160px}.date-grid select{height:50px}.date-shell h1{text-align:center;font-size:38px;font-weight:400}.date-shell .intro-copy{text-align:center;font-size:20px}.date-shell hr{margin:30px 0 60px}.form-actions{display:flex;gap:14px;justify-content:center}.btn-back{background:#fff;border:1px solid #0abab5;color:#0abab5}.btn-next{background:#0abab5;color:#fff}

.savings-shell{text-align:center;}
.savings-shell h1{font-size:36px;font-weight:400;color:#089895;margin-top:40px}
.savings-shell .intro-copy{max-width:760px;margin:40px auto 35px;text-align:left;font-size:20px}
.select-copy{text-align:left;max-width:760px;margin:auto;font-size:18px}
.system-cards{display:flex;gap:12px;justify-content:center;margin:25px auto 40px}
.system-card{width:245px;height:250px;border:1px solid #0abab5;border-radius:5px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;color:#333;font-size:20px;cursor:pointer}
.system-card i{font-size:38px;color:#0abab5}.system-card input{width:32px;height:32px;accent-color:#0abab5}
.none-btn{width:480px;height:55px;border:1px solid #0abab5;background:white;color:#089895;font-size:22px}

/* Final alignment and Tiffany blue consistency */
.auto-quote-page .step-shell > hr,
.auto-quote-page .step-divider {
  border:0;
  border-top:1px solid #EAEAEA;
  margin:40px 0;
}

.auto-quote-page .form-actions {
  align-items:center;
  justify-content:center;
}

.auto-quote-page .btn-next,
.auto-quote-page .btn-primary,
.auto-quote-page .btn-submit {
  background:#0abab5 !important;
  color:#fff !important;
  border-color:#0abab5 !important;
}

.auto-quote-page .btn-next:hover,
.auto-quote-page .btn-primary:hover,
.auto-quote-page .btn-submit:hover {
  background:#0abab5 !important;
}

.auto-quote-page .btn-back {
  background:#fff !important;
  color:#0abab5 !important;
  border:1px solid #0abab5 !important;
}

.auto-quote-page .btn-back:hover {
  background:rgba(51,192,180,.08) !important;
}

.auto-quote-page .none-btn {
  border-color:#0abab5 !important;
  color:#0abab5 !important;
}

/* === Requested final polish: Tiffany third-step cards, aligned actions and screenshot-style progress === */
:root{
  --tiffany-blue:#0abab5;
  --tiffany-blue-dark:#0abab5;
  --progress-muted:#d7dddf;
  --progress-muted-text:#aeb5b8;
}

/* Progress bar: circular icons joined by horizontal lines, matching the reference layout */
















/* Third step: replace all previous green accents with Tiffany blue */
body.auto-quote-page .savings-shell h1{color:#214f4b}
body.auto-quote-page .system-card{
  border:2px solid var(--tiffany-blue) !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.auto-quote-page .system-card:hover{
  border-color:var(--tiffany-blue-dark) !important;
  box-shadow:0 8px 22px rgba(51,192,180,.16);
  transform:translateY(-2px);
}
body.auto-quote-page .system-card i{
  color:var(--tiffany-blue) !important;
}
body.auto-quote-page .system-card input{
  accent-color:var(--tiffany-blue) !important;
}
body.auto-quote-page .system-card:has(input:checked){
  background:rgba(51,192,180,.08);
  border-color:var(--tiffany-blue-dark) !important;
}
body.auto-quote-page .none-btn{
  border:2px solid var(--tiffany-blue) !important;
  color:var(--tiffany-blue) !important;
  border-radius:5px;
}

/* Keep Back/Next perfectly aligned and equal-sized on every non-single step */
html body.auto-quote-page .home-form .form-actions:not(.is-single){
  display:flex !important;
  grid-template-columns:none !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:16px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
html body.auto-quote-page .home-form .form-actions:not(.is-single) .btn{
  flex:0 0 170px !important;
  width:170px !important;
  max-width:170px !important;
  min-height:50px;
  margin:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:700px){
  
  
  
  
  
  
  body.auto-quote-page .system-cards{flex-direction:column;align-items:center}
  body.auto-quote-page .system-card{width:min(100%,320px)}
  body.auto-quote-page .none-btn{width:min(100%,480px)}
  html body.auto-quote-page .home-form .form-actions:not(.is-single){gap:10px !important}
  html body.auto-quote-page .home-form .form-actions:not(.is-single) .btn{
    flex:1 1 0 !important;width:auto !important;max-width:170px !important;
  }
}


/* ChatGPT final requested tweaks */


body.auto-quote-page .none-btn{
  display:block !important;
  margin:24px auto 0 !important;
  width:min(480px,100%) !important;
  text-align:center !important;
}

/* About You step — matched to supplied reference */
body.auto-quote-page .about-shell{
  width:100%; max-width:none; padding:42px 5% 72px; text-align:center; background:#fff;
}
body.auto-quote-page .about-section{max-width:490px;margin:0 auto 78px}
body.auto-quote-page .about-section h1,
body.auto-quote-page .about-section h2{font-weight:400;color:#089895;text-align:center;margin:0 0 52px;line-height:1.2}
body.auto-quote-page .about-section h1{font-size:38px}
body.auto-quote-page .about-section h2{font-size:31px}
body.auto-quote-page .help-dot{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border:1.5px solid #777;border-radius:50%;background:#fff;color:#666;font-size:13px;vertical-align:middle;margin-left:8px;padding:0;cursor:help}
body.auto-quote-page .about-fields .field-group{margin-bottom:36px;text-align:left}
body.auto-quote-page .about-fields label,
body.auto-quote-page .dob-grid label{display:block;font-size:18px;color:#444;margin-bottom:14px;font-weight:400}
body.auto-quote-page .about-fields input{width:100%;height:56px;border:1px solid #cfcfcf;border-radius:0;background:#fff;padding:0 16px;font-size:18px}
body.auto-quote-page .preferred-name-btn{width:100%;height:52px;border:1px solid #0abab5;border-radius:5px;background:#fff;color:#089895;font-size:20px;font-weight:400;cursor:pointer}
body.auto-quote-page .preferred-name-btn .plus{font-weight:700;font-size:27px;line-height:1;margin-right:8px}
body.auto-quote-page .preferred-name-field{display:none;margin-top:30px}
body.auto-quote-page .preferred-name-field.is-visible{display:block}
body.auto-quote-page .dob-section{margin-top:6px;margin-bottom:84px}
body.auto-quote-page .dob-section h2{margin-bottom:46px}
body.auto-quote-page .dob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;text-align:left}
body.auto-quote-page .dob-grid select{width:100%;height:51px;border:1px solid #cfcfcf;border-radius:0;background:#f8f8f8;padding:0 18px;font-size:18px;color:#666}
body.auto-quote-page .choice-section{margin-bottom:78px}
body.auto-quote-page .choice-section h2{margin-bottom:34px}
body.auto-quote-page .about-choice{width:100%;margin:0 auto}
body.auto-quote-page .about-choice label span{height:52px;display:flex;align-items:center;justify-content:center;border-color:#0abab5;color:#303030;font-size:19px;background:#fff}
body.auto-quote-page .about-choice label input:checked + span{background:#0abab5;color:#fff}
body.auto-quote-page .marital-section{margin-bottom:70px}
body.auto-quote-page .about-divider{width:100%;margin:0 0 62px;border:0;border-top:1px solid #d4d4d4}
body.auto-quote-page .about-shell > .form-actions{max-width:735px;margin:0 auto;gap:13px!important}
body.auto-quote-page .about-shell > .form-actions .btn{width:50%!important;max-width:none!important;height:55px;font-size:20px;border-radius:4px}
body.auto-quote-page .about-shell .btn-back{border-color:#0abab5;color:#089895;background:#fff}
body.auto-quote-page .about-shell .btn-next:disabled{background:#f1f1f1;color:#d8d8d8;border:1px solid #e6e6e6;cursor:not-allowed}
@media(max-width:700px){
 body.auto-quote-page .about-shell{padding:34px 20px 52px}
 body.auto-quote-page .about-section{margin-bottom:58px}
 body.auto-quote-page .about-section h1{font-size:31px}
 body.auto-quote-page .about-section h2{font-size:27px}
 body.auto-quote-page .dob-grid{grid-template-columns:1fr;gap:18px}
 body.auto-quote-page .about-shell > .form-actions{flex-direction:column}
 body.auto-quote-page .about-shell > .form-actions .btn{width:100%!important}
}

/* === Final requested fixes: truly centered top progress + refined About You typography === */




/* Last step typography: balanced desktop sizing and consistent controls */
body.auto-quote-page .about-section h1{
  font-size:34px !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
}
body.auto-quote-page .about-section h2{
  font-size:29px !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
}
body.auto-quote-page .about-fields label,
body.auto-quote-page .dob-grid label{
  font-size:17px !important;
  line-height:1.4 !important;
}
body.auto-quote-page .about-fields input,
body.auto-quote-page .dob-grid select{
  font-size:17px !important;
}
body.auto-quote-page .preferred-name-btn{
  font-size:18px !important;
}
body.auto-quote-page .preferred-name-btn .plus{
  font-size:24px !important;
}
body.auto-quote-page .about-choice label span{
  font-size:18px !important;
}
body.auto-quote-page .about-shell > .form-actions .btn{
  font-size:18px !important;
}

@media (max-width:700px){
  
  body.auto-quote-page .about-section h1{font-size:29px !important;}
  body.auto-quote-page .about-section h2{font-size:25px !important;}
  body.auto-quote-page .about-fields label,
  body.auto-quote-page .dob-grid label{font-size:16px !important;}
  body.auto-quote-page .about-fields input,
  body.auto-quote-page .dob-grid select,
  body.auto-quote-page .preferred-name-btn,
  body.auto-quote-page .about-choice label span,
  body.auto-quote-page .about-shell > .form-actions .btn{font-size:16px !important;}
}

/* === REAL FIX v2 — centered progress bar + corrected final-step typography === */








/* Final/About You step: normalized type scale to match the supplied screenshots */
body.auto-quote-page .about-shell{
  padding-top:40px !important;
}
body.auto-quote-page .about-section h1{
  font-size:32px !important;
  line-height:1.25 !important;
  font-weight:400 !important;
  margin-bottom:42px !important;
}
body.auto-quote-page .about-section h2{
  font-size:27px !important;
  line-height:1.3 !important;
  font-weight:400 !important;
  margin-bottom:32px !important;
}
body.auto-quote-page .about-fields label,
body.auto-quote-page .dob-grid label{
  font-size:16px !important;
  line-height:1.4 !important;
  margin-bottom:10px !important;
}
body.auto-quote-page .about-fields input,
body.auto-quote-page .dob-grid select{
  font-size:16px !important;
  height:52px !important;
}
body.auto-quote-page .preferred-name-btn{
  font-size:17px !important;
  height:50px !important;
}
body.auto-quote-page .preferred-name-btn .plus{
  font-size:22px !important;
}
body.auto-quote-page .about-choice label span{
  font-size:17px !important;
  height:50px !important;
}
body.auto-quote-page .about-shell > .form-actions .btn{
  font-size:17px !important;
  height:52px !important;
}

@media (max-width:700px){
  
  
  
  
  body.auto-quote-page .about-section h1{font-size:28px !important;}
  body.auto-quote-page .about-section h2{font-size:24px !important;}
  body.auto-quote-page .about-fields label,
  body.auto-quote-page .dob-grid label{font-size:15px !important;}
  body.auto-quote-page .about-fields input,
  body.auto-quote-page .dob-grid select,
  body.auto-quote-page .preferred-name-btn,
  body.auto-quote-page .about-choice label span,
  body.auto-quote-page .about-shell > .form-actions .btn{font-size:15px !important;}
}

/* === Final contact/consent step === */
body.auto-quote-page .final-shell{
  width:100%;
  max-width:none;
  padding:42px 5% 72px;
  background:#fff;
}
body.auto-quote-page .final-section{
  width:min(490px,100%);
  margin:0 auto;
}
body.auto-quote-page .final-section h1{
  margin:0 0 52px;
  text-align:center;
  color:#089895;
  font-size:32px;
  line-height:1.25;
  font-weight:400;
}
body.auto-quote-page .final-field-group{
  margin-bottom:38px;
  text-align:left;
}
body.auto-quote-page .final-field-group label{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  color:#303030;
  font-size:17px;
  line-height:1.45;
  font-weight:400;
}
body.auto-quote-page .final-field-group label .help-dot{
  flex:0 0 21px;
  margin-left:auto;
}
body.auto-quote-page .final-field-group input{
  width:100%;
  height:55px;
  border:1px solid #c9c9c9;
  border-radius:0;
  background:#eef4ff;
  padding:0 18px;
  color:#1f1f1f;
  font-size:17px;
}
body.auto-quote-page .privacy-copy{
  margin:4px 0 28px;
  color:#303030;
  font-size:15px;
  line-height:1.5;
  text-align:left;
}
body.auto-quote-page .privacy-copy a{color:#089895;text-decoration:underline}
body.auto-quote-page .agree-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:82px;
  margin:0 0 10px;
  padding:18px 22px;
  border:2px solid #0abab5;
  border-radius:4px;
  background:#f4fbfa;
  color:#303030;
  font-size:18px;
  cursor:pointer;
}
body.auto-quote-page .agree-card input{position:absolute;opacity:0;pointer-events:none}
body.auto-quote-page .agree-box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:2px solid #0abab5;
  background:#fff;
  color:transparent;
  font-size:20px;
}
body.auto-quote-page .agree-card input:checked + .agree-box{
  background:#0abab5;
  color:#fff;
}
body.auto-quote-page .credit-note{
  padding:26px 24px;
  background:#f2fafa;
  color:#303030;
  font-size:15px;
  line-height:1.55;
  text-align:left;
}
body.auto-quote-page .final-divider{
  width:100%;
  margin:70px 0 62px;
  border:0;
  border-top:1px solid #d4d4d4;
}
body.auto-quote-page .final-actions{
  width:min(735px,100%);
  margin:0 auto;
  gap:13px!important;
}
body.auto-quote-page .final-actions .btn{
  width:50%!important;
  max-width:none!important;
  height:55px;
  border-radius:4px;
  font-size:18px;
}
body.auto-quote-page .final-actions .btn-back{
  border-color:#0abab5;
  color:#089895;
  background:#fff;
}
body.auto-quote-page .calculate-btn{
  border:1px solid #0abab5;
  background:#0abab5;
  color:#fff;
}
body.auto-quote-page .calculate-btn:disabled{
  border-color:#e6e6e6;
  background:#f1f1f1;
  color:#d1d1d1;
  cursor:not-allowed;
}

@media(max-width:700px){
  body.auto-quote-page .final-shell{padding:34px 20px 52px}
  body.auto-quote-page .final-section h1{font-size:28px;margin-bottom:40px}
  body.auto-quote-page .final-field-group label{font-size:15px}
  body.auto-quote-page .final-field-group input{font-size:16px;height:52px}
  body.auto-quote-page .privacy-copy,
  body.auto-quote-page .credit-note{font-size:14px}
  body.auto-quote-page .agree-card{font-size:16px;min-height:70px}
  body.auto-quote-page .final-actions{flex-direction:column}
  body.auto-quote-page .final-actions .btn{width:100%!important;font-size:16px}
}
nn/* ===== Requested Tiffany-only final pass ===== */
:root{
  --primary-color:#0abab5 !important;
  --primary-hover:#089895 !important;
  --primary-light:#e8f8f7 !important;
  --dark-green:#089895 !important;
  --success-color:#0abab5 !important;
  --border-focus:#0abab5 !important;
  --tiffany-blue:#0abab5;
  --tiffany-blue-dark:#089895;
  --tiffany-blue-soft:#e8f8f7;
}

/* No green accents: all interactive states use Tiffany blue. */
body.auto-quote-page a,
body.auto-quote-page .privacy-copy a{color:#089895 !important;}
body.auto-quote-page input:focus,
body.auto-quote-page select:focus,
body.auto-quote-page button:focus-visible{border-color:#0abab5 !important;outline-color:#0abab5 !important;}
body.auto-quote-page input[type="checkbox"],
body.auto-quote-page input[type="radio"]{accent-color:#0abab5 !important;}
body.auto-quote-page .about-section h1,
body.auto-quote-page .about-section h2,
body.auto-quote-page .final-section h1{color:#089895 !important;}
body.auto-quote-page .about-choice label span,
body.auto-quote-page .btn-back,
body.auto-quote-page .agree-card,
body.auto-quote-page .agree-box{border-color:#0abab5 !important;}
body.auto-quote-page .about-choice label input:checked + span,
body.auto-quote-page .agree-card input:checked + .agree-box,
body.auto-quote-page .calculate-btn:not(:disabled),
body.auto-quote-page .btn-next:not(:disabled){background:#0abab5 !important;border-color:#0abab5 !important;color:#fff !important;}
body.auto-quote-page .btn-back{color:#089895 !important;background:#fff !important;}

/* Progress: centered three equal columns with one continuous line exactly through icon centres. */










/* “None of the above” is now a real input option matching the form/card design. */
body.auto-quote-page .none-input-option{
  width:min(480px,100%);
  min-height:56px;
  margin:24px auto 0;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:2px solid #0abab5;
  border-radius:5px;
  background:#fff;
  color:#089895;
  font-size:18px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
body.auto-quote-page .none-input-option input{position:absolute;opacity:0;pointer-events:none;}
body.auto-quote-page .none-input-box{
  width:24px;height:24px;flex:0 0 24px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #0abab5;border-radius:3px;background:#fff;color:transparent;font-size:14px;
}
body.auto-quote-page .none-input-option:has(input:checked){background:#e8f8f7;border-color:#089895;color:#089895;}
body.auto-quote-page .none-input-option input:checked + .none-input-box{background:#0abab5;border-color:#0abab5;color:#fff;}
body.auto-quote-page .none-input-text{line-height:1.2;}

/* Final submit action. */
body.auto-quote-page .calculate-btn:not(:disabled){background:#0abab5 !important;border-color:#0abab5 !important;}
body.auto-quote-page .calculate-btn:not(:disabled):hover{background:#089895 !important;border-color:#089895 !important;}

@media(max-width:700px){
  
  
  
  
  
  body.auto-quote-page .none-input-option{min-height:52px;font-size:16px;}
}

/* progress fix */




/* Required-field navigation validation */
.btn:disabled,
.btn[disabled] {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(18%);
}

/* red borders for all stage icons */



/* FINAL: progress icons always use red borders, including active/completed states */





/* ChatGPT custom tweaks */






/* Screenshot-matched top progress bar (final override) */

















/* FINAL REFINEMENT: smaller icons and precisely centered connector line */





/* FINAL LINE-ONLY FIX: align connectors and keep them outside icon borders */






/* COMPLETE FINAL PROGRESS LINE ALIGNMENT FIX */







/* USER FIX: connector lines touch icon borders exactly, never enter circles */




/* DEFINITIVE TOP PROGRESS LINE: one continuous connector touching icon borders */




/* Home-owner flow screens */
.owner-shell{max-width:620px;margin:0 auto;text-align:left}.owner-shell>h1{text-align:center;color:#089895;font-weight:400;margin-bottom:48px}.owner-shell .intro-copy{max-width:520px;margin:0 auto 28px}.owner-shell .segmented{margin:0 auto 34px}.owner-shell .field-group{max-width:520px;margin:0 auto 28px}.owner-shell input,.owner-shell select{width:100%;min-height:54px;padding:12px 18px;font-size:18px;border:1px solid #cfcfcf;border-bottom:3px solid #0abab5;background:#fff}.owner-shell h2{text-align:center;color:#089895;font-weight:400;margin:38px 0 24px}.wide-owner{max-width:760px}.high-value-list{display:grid;gap:16px}.hv-card{display:flex;align-items:center;gap:15px;border:1px solid #0abab5;padding:25px 32px;font-size:18px;cursor:pointer}.hv-card input{width:30px;height:30px;min-height:auto}.hv-card:has(input:checked){background:#0abab5;color:#fff}.hv-detail{display:none;background:#f2f5f3;padding:22px 38px}.hv-detail.is-visible{display:block}.hv-detail input{margin-top:14px}.claim-card{background:#f2f5f3;padding:34px;margin-top:28px}.claim-card h2{margin-top:0}.standalone-label{display:block;max-width:520px;margin:28px auto 16px;font-size:18px}.owner-shell .form-actions{margin-top:45px}.quote-step.nonowner-only:not(.is-active),.quote-step.owner-only:not(.is-active){display:none}
@media(max-width:700px){.owner-shell,.wide-owner{max-width:100%}.hv-card{padding:18px}.claim-card{padding:20px}}

/* FINAL USER REQUEST FIXES: Tiffany theme, no horizontal overflow, stable step layout */
:root{
  --tiffany-blue:#0abab5;
  --tiffany-blue-dark:#089895;
  --tiffany-blue-soft:#e8f8f7;
}
html,body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
}
*,*::before,*::after{box-sizing:border-box !important;}
body.auto-quote-page,
body.auto-quote-page .quote-main,
body.auto-quote-page .quote-form,
body.auto-quote-page .quote-step,
body.auto-quote-page .step-shell,
body.auto-quote-page .owner-shell,
body.auto-quote-page .wide-owner,
body.auto-quote-page .savings-shell,
body.auto-quote-page .about-shell,
body.auto-quote-page .final-shell{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
}
body.auto-quote-page .quote-step > .step-shell{
  width:min(100% - 32px, 930px) !important;
  max-width:930px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step > .owner-shell{max-width:760px !important;}
body.auto-quote-page .quote-step > .wide-owner{max-width:900px !important;}
body.auto-quote-page img,body.auto-quote-page svg{max-width:100% !important;}
body.auto-quote-page input,body.auto-quote-page select,body.auto-quote-page textarea,
body.auto-quote-page .field-group,body.auto-quote-page .segmented,
body.auto-quote-page .system-cards,body.auto-quote-page .high-value-list,
body.auto-quote-page .claim-card{min-width:0 !important;max-width:100% !important;}

/* Progress icons: Tiffany blue only, never red/green */





/* Replace owner-flow greens with Tiffany blue */
body.auto-quote-page .owner-shell > h1,
body.auto-quote-page .owner-shell h2,
body.auto-quote-page .home-section-title h2{color:var(--tiffany-blue-dark) !important;}
body.auto-quote-page .owner-shell input,
body.auto-quote-page .owner-shell select{border-bottom-color:var(--tiffany-blue) !important;}
body.auto-quote-page .hv-card,
body.auto-quote-page .system-card,
body.auto-quote-page .none-btn{border-color:var(--tiffany-blue) !important;}
body.auto-quote-page .hv-card:has(input:checked),
body.auto-quote-page .system-card:has(input:checked),
body.auto-quote-page .none-btn.is-selected,
body.auto-quote-page .segmented input:checked + span{
  background:var(--tiffany-blue) !important;
  border-color:var(--tiffany-blue) !important;
  color:#fff !important;
}
body.auto-quote-page .system-card i,
body.auto-quote-page .none-btn,
body.auto-quote-page a,
body.auto-quote-page .btn-back{color:var(--tiffany-blue-dark) !important;}
body.auto-quote-page input[type="checkbox"],body.auto-quote-page input[type="radio"]{accent-color:var(--tiffany-blue) !important;}
body.auto-quote-page .btn-next:not(:disabled),
body.auto-quote-page .calculate-btn:not(:disabled),
body.auto-quote-page .none-input-option:has(input:checked){
  background:var(--tiffany-blue) !important;
  border-color:var(--tiffany-blue) !important;
  color:#fff !important;
}
body.auto-quote-page .btn-back{border-color:var(--tiffany-blue) !important;background:#fff !important;}
body.auto-quote-page .btn-next:disabled,
body.auto-quote-page .calculate-btn:disabled{background:#a7dfdc !important;border-color:#a7dfdc !important;color:#fff !important;}
body.auto-quote-page .hv-detail,body.auto-quote-page .claim-card,body.auto-quote-page .home-note{background:var(--tiffany-blue-soft) !important;}

/* Prevent desktop cards and controls from forcing page wider than viewport */
body.auto-quote-page .system-cards{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;width:100% !important;gap:16px !important;}
body.auto-quote-page .system-card{width:100% !important;min-width:0 !important;}
body.auto-quote-page .none-btn,body.auto-quote-page .none-input-option{max-width:100% !important;}
body.auto-quote-page .form-actions{width:100% !important;max-width:735px !important;margin-left:auto !important;margin-right:auto !important;}

@media(max-width:700px){
  body.auto-quote-page .quote-step > .step-shell{width:calc(100% - 20px) !important;padding-left:14px !important;padding-right:14px !important;}
  body.auto-quote-page .system-cards{grid-template-columns:1fr !important;}
  body.auto-quote-page .form-actions{flex-direction:column !important;}
  body.auto-quote-page .form-actions .btn{width:100% !important;max-width:none !important;}
  body.auto-quote-page .segmented.three{grid-template-columns:1fr !important;}
}

/* FINAL CONSISTENCY FIX: active progress red, owner/savings controls equal width */





/* Keep step 3 onward visually aligned with the first two form screens */
body.auto-quote-page .quote-step.owner-only > .step-shell,
body.auto-quote-page .quote-step.owner-only > .owner-shell,
body.auto-quote-page .quote-step.owner-only > .wide-owner,
body.auto-quote-page .quote-step.owner-only > .savings-shell{
  width:min(100% - 32px, 640px) !important;
  max-width:640px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step.owner-only .intro-copy,
body.auto-quote-page .quote-step.owner-only .select-copy,
body.auto-quote-page .quote-step.owner-only .standalone-label,
body.auto-quote-page .quote-step.owner-only .field-group,
body.auto-quote-page .quote-step.owner-only .segmented,
body.auto-quote-page .quote-step.owner-only .conditional-block,
body.auto-quote-page .quote-step.owner-only .high-value-list,
body.auto-quote-page .quote-step.owner-only #claimsContainer,
body.auto-quote-page .quote-step.owner-only .none-input-option{
  width:100% !important;
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step.owner-only .system-cards{
  width:100% !important;
  max-width:640px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step.owner-only .hv-card,
body.auto-quote-page .quote-step.owner-only .hv-detail,
body.auto-quote-page .quote-step.owner-only .claim-card{
  width:100% !important;
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step.owner-only .claim-card .field-group,
body.auto-quote-page .quote-step.owner-only .claim-card .date-grid{
  max-width:100% !important;
}
body.auto-quote-page .quote-step.owner-only .form-actions{
  max-width:520px !important;
}
body.auto-quote-page .quote-step.owner-only input:not([type="checkbox"]):not([type="radio"]),
body.auto-quote-page .quote-step.owner-only select,
body.auto-quote-page .quote-step.owner-only textarea{
  width:100% !important;
  max-width:100% !important;
}

@media(max-width:700px){
  body.auto-quote-page .quote-step.owner-only > .step-shell,
  body.auto-quote-page .quote-step.owner-only > .owner-shell,
  body.auto-quote-page .quote-step.owner-only > .wide-owner,
  body.auto-quote-page .quote-step.owner-only > .savings-shell{
    width:calc(100% - 20px) !important;
    max-width:none !important;
  }
  body.auto-quote-page .quote-step.owner-only .system-cards{
    max-width:520px !important;
  }
}

/* === FINAL USER REQUEST: active progress is red + larger equal navigation buttons === */




body.auto-quote-page .form-actions{
  max-width:780px !important;
  gap:18px !important;
}
body.auto-quote-page .form-actions .btn,
body.auto-quote-page .about-shell > .form-actions .btn,
body.auto-quote-page .final-actions .btn{
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  height:62px !important;
  min-height:62px !important;
  padding:0 28px !important;
  font-size:21px !important;
  border-radius:5px !important;
}
body.auto-quote-page .form-actions.is-single .btn{
  width:300px !important;
  min-width:300px !important;
  max-width:300px !important;
}
@media(max-width:700px){
  body.auto-quote-page .form-actions .btn,
  body.auto-quote-page .about-shell > .form-actions .btn,
  body.auto-quote-page .final-actions .btn,
  body.auto-quote-page .form-actions.is-single .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:58px !important;
    min-height:58px !important;
    font-size:19px !important;
  }
}

/* === FINAL FIX: current and previously completed progress icons stay red === */




/* Wider navigation buttons without increasing their height */
body.auto-quote-page .form-actions{
  max-width:900px !important;
  gap:20px !important;
}
body.auto-quote-page .form-actions .btn,
body.auto-quote-page .about-shell > .form-actions .btn,
body.auto-quote-page .final-actions .btn{
  width:320px !important;
  min-width:320px !important;
  max-width:320px !important;
  height:54px !important;
  min-height:54px !important;
  padding:0 34px !important;
  font-size:20px !important;
}
body.auto-quote-page .form-actions.is-single .btn{
  width:360px !important;
  min-width:360px !important;
  max-width:360px !important;
  height:54px !important;
  min-height:54px !important;
}
@media(max-width:700px){
  body.auto-quote-page .form-actions .btn,
  body.auto-quote-page .about-shell > .form-actions .btn,
  body.auto-quote-page .final-actions .btn,
  body.auto-quote-page .form-actions.is-single .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:54px !important;
    min-height:54px !important;
    font-size:19px !important;
  }
}

/* Condo owner flow */
body.auto-quote-page .quote-step.condo-only > .step-shell{width:min(100% - 32px,980px);margin-inline:auto;}
body.auto-quote-page .quote-step.condo-only .field-group,body.auto-quote-page .quote-step.condo-only .segmented,body.auto-quote-page .quote-step.condo-only .option-list,body.auto-quote-page .quote-step.condo-only .high-value-list{width:min(100%,620px);margin-left:auto;margin-right:auto;}
body.auto-quote-page .segmented.five{display:grid;grid-template-columns:repeat(5,1fr);}
body.auto-quote-page .option-list{display:grid;gap:14px;}
body.auto-quote-page .option-card{display:flex;align-items:center;gap:20px;min-height:86px;padding:18px 28px;border:1.5px solid #0abab5;border-radius:6px;background:#fff;cursor:pointer;}
body.auto-quote-page .option-card input{width:28px;height:28px;accent-color:#0abab5;flex:0 0 auto;}
body.auto-quote-page .option-card:has(input:checked){background:#0abab5;color:#fff;box-shadow:inset 0 0 0 3px #fff;}
body.auto-quote-page .quote-step.condo-only .segmented input:checked + span,body.auto-quote-page .quote-step.condo-only .hv-card:has(input:checked),body.auto-quote-page .quote-step.condo-only .system-card:has(input:checked),body.auto-quote-page .quote-step.condo-only .none-input-option:has(input:checked){background:#0abab5 !important;color:#fff !important;border-color:#0abab5 !important;}
@media(max-width:700px){body.auto-quote-page .segmented.five{grid-template-columns:1fr 1fr;}body.auto-quote-page .segmented.five label:last-child{grid-column:1/-1;}body.auto-quote-page .quote-step.condo-only > .step-shell{width:calc(100% - 20px);}}

/* === Condo Owner width consistency: match Home Owner / first form steps === */
body.auto-quote-page .quote-step.condo-only > .step-shell,
body.auto-quote-page .quote-step.condo-only > .owner-shell,
body.auto-quote-page .quote-step.condo-only > .savings-shell,
body.auto-quote-page .quote-step.condo-only > .wide-owner{
  width:min(100% - 32px, 640px) !important;
  max-width:640px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step.condo-only .intro-copy,
body.auto-quote-page .quote-step.condo-only .select-copy,
body.auto-quote-page .quote-step.condo-only .field-group,
body.auto-quote-page .quote-step.condo-only .segmented,
body.auto-quote-page .quote-step.condo-only .option-list,
body.auto-quote-page .quote-step.condo-only .high-value-list,
body.auto-quote-page .quote-step.condo-only .none-input-option,
body.auto-quote-page .quote-step.condo-only #condoClaimsContainer{
  width:100% !important;
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step.condo-only .system-cards{
  width:100% !important;
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step.condo-only .option-card,
body.auto-quote-page .quote-step.condo-only .hv-card,
body.auto-quote-page .quote-step.condo-only .hv-detail,
body.auto-quote-page .quote-step.condo-only .claim-card{
  width:100% !important;
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
body.auto-quote-page .quote-step.condo-only input:not([type="checkbox"]):not([type="radio"]),
body.auto-quote-page .quote-step.condo-only select,
body.auto-quote-page .quote-step.condo-only textarea{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
@media(max-width:700px){
  body.auto-quote-page .quote-step.condo-only > .step-shell,
  body.auto-quote-page .quote-step.condo-only > .owner-shell,
  body.auto-quote-page .quote-step.condo-only > .savings-shell,
  body.auto-quote-page .quote-step.condo-only > .wide-owner{
    width:calc(100% - 20px) !important;
    max-width:none !important;
  }
}

/* Exact fix requested: About You Back/Next match other steps; prevent flex stretching */
html body.auto-quote-page .about-shell > .form-actions{
  width:100% !important;
  max-width:660px !important;
  justify-content:center !important;
  gap:20px !important;
}
html body.auto-quote-page .about-shell > .form-actions > .btn{
  flex:0 0 320px !important;
  width:320px !important;
  min-width:320px !important;
  max-width:320px !important;
  height:54px !important;
  min-height:54px !important;
}
@media(max-width:700px){
  html body.auto-quote-page .about-shell > .form-actions{
    max-width:none !important;
  }
  html body.auto-quote-page .about-shell > .form-actions > .btn{
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* FINAL: only About You navigation button size aligned with the other form pages */
html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions{
  max-width:540px !important;
  gap:20px !important;
}
html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions > .btn{
  flex:0 0 260px !important;
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  height:54px !important;
  min-height:54px !important;
  padding:0 28px !important;
  font-size:20px !important;
}
@media(max-width:700px){
  html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions{
    max-width:none !important;
  }
  html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions > .btn{
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}

/* FINAL USER FIX: About You navigation only — compact like the other steps */
html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions{
  width:100% !important;
  max-width:460px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
  gap:16px !important;
}
html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions > .btn{
  flex:0 0 220px !important;
  width:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  height:50px !important;
  min-height:50px !important;
  padding:0 24px !important;
  font-size:18px !important;
  border-radius:5px !important;
}
@media(max-width:700px){
  html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions{
    max-width:none !important;
  }
  html body.auto-quote-page .quote-step[data-step="16"] .about-shell > .form-actions > .btn{
    flex:1 1 0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:50px !important;
    min-height:50px !important;
    font-size:17px !important;
  }
}


/* === Requested final form/mobile adjustments === */
body.auto-quote-page .first-page-contact-section{
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid #e1e8e5;
}
body.auto-quote-page .first-page-contact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 767px){
  body.auto-quote-page .quote-main{overflow-x:hidden !important;}
  body.auto-quote-page .step-shell,
  body.auto-quote-page .step-shell.start-shell,
  body.auto-quote-page .step-shell.owner-shell,
  body.auto-quote-page .step-shell.condo-shell,
  body.auto-quote-page .step-shell.about-shell,
  body.auto-quote-page .step-shell.date-shell,
  body.auto-quote-page .step-shell.savings-shell{
    width:100% !important;
    max-width:100% !important;
    padding:26px 16px 32px !important;
    overflow:hidden !important;
  }
  body.auto-quote-page .home-address-grid,
  body.auto-quote-page .about-fields,
  body.auto-quote-page .dob-grid,
  body.auto-quote-page .date-grid,
  body.auto-quote-page .first-page-contact-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  body.auto-quote-page input,
  body.auto-quote-page select,
  body.auto-quote-page textarea{max-width:100% !important; min-width:0 !important;}

  /* Back and Next/Submit always stay on one row on mobile. */
  body.auto-quote-page .form-actions:not(.is-single),
  body.auto-quote-page .final-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    align-items:stretch !important;
    width:100% !important;
  }
  body.auto-quote-page .form-actions:not(.is-single) .btn,
  body.auto-quote-page .final-actions .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    padding:10px 8px !important;
    font-size:15px !important;
    white-space:nowrap !important;
  }
  body.auto-quote-page .form-actions.is-single{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  body.auto-quote-page .segmented.three,
  body.auto-quote-page .segmented.five{
    grid-template-columns:1fr !important;
  }
}

/* === ABSOLUTE FINAL MOBILE LAYOUT FIX (2026-07-25) === */
@media screen and (max-width: 767px){
  html body.auto-quote-page .quote-main,
  html body.auto-quote-page #quoteTop,
  html body.auto-quote-page #homeQuoteForm,
  html body.auto-quote-page .quote-step,
  html body.auto-quote-page .quote-step.is-active{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  html body.auto-quote-page .quote-step.is-active > .step-shell,
  html body.auto-quote-page .quote-step.is-active > .owner-shell,
  html body.auto-quote-page .quote-step.is-active > .about-shell,
  html body.auto-quote-page .quote-step.is-active > .date-shell,
  html body.auto-quote-page .quote-step.is-active > .savings-shell,
  html body.auto-quote-page .quote-step.is-active > .condo-shell{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:10px !important;
    margin-right:10px !important;
    padding:24px 14px 28px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Coverage date: exactly one complete field per row. */
  html body.auto-quote-page .quote-step[data-step="2"] .date-grid,
  html body.auto-quote-page .date-shell .date-grid,
  html body.auto-quote-page .claim-card .date-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:14px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  html body.auto-quote-page .date-grid > .field-group,
  html body.auto-quote-page .date-grid select,
  html body.auto-quote-page .date-grid input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Every Back + Next/Submit pair stays on one horizontal line. */
  html body.auto-quote-page .quote-step.is-active .form-actions:not(.is-single),
  html body.auto-quote-page .quote-step.is-active .final-actions,
  html body.auto-quote-page .quote-step.is-active .about-shell > .form-actions:not(.is-single){
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-auto-flow:column !important;
    flex-direction:row !important;
    justify-content:stretch !important;
    align-items:stretch !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }
  html body.auto-quote-page .quote-step.is-active .form-actions:not(.is-single) > .btn,
  html body.auto-quote-page .quote-step.is-active .final-actions > .btn,
  html body.auto-quote-page .quote-step.is-active .about-shell > .form-actions:not(.is-single) > .btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:1 1 0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    padding:8px 5px !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }

  /* Pages having only Next: normal compact button, never a tall full-page block. */
  html body.auto-quote-page .quote-step.is-active .form-actions.is-single{
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-end !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:28px 0 0 !important;
  }
  html body.auto-quote-page .quote-step.is-active .form-actions.is-single > .btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    padding:8px 12px !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:1 !important;
    box-sizing:border-box !important;
  }

  html body.auto-quote-page .home-address-grid,
  html body.auto-quote-page .about-fields,
  html body.auto-quote-page .dob-grid,
  html body.auto-quote-page .first-page-contact-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }

  html body.auto-quote-page .high-value-list,
  html body.auto-quote-page .hv-item,
  html body.auto-quote-page .hv-card,
  html body.auto-quote-page .hv-detail,
  html body.auto-quote-page .option-list,
  html body.auto-quote-page .option-card,
  html body.auto-quote-page .segmented,
  html body.auto-quote-page .field-group{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}


/* Final contact layout: Name and Phone always on separate full-width rows. */
html body.auto-quote-page .first-page-contact-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
}
html body.auto-quote-page .first-page-contact-grid > .field-group,
html body.auto-quote-page #fullName,
html body.auto-quote-page #contactPhone {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Screenshot field-flow update — preserve original header/footer/UI */
:root{--tiffany:#0ABAB5;--tiffany-dark:#079a96}
html,body{max-width:100%;overflow-x:hidden!important}
.auto-quote-page *{box-sizing:border-box}
.auto-quote-page .quote-main,.auto-quote-page .quote-form,.auto-quote-page .quote-step,.auto-quote-page .step-shell{max-width:100%}
.auto-quote-page .quote-step{display:none}
.auto-quote-page .quote-step.is-active{display:block}
.auto-quote-page .step-shell{width:min(920px,calc(100% - 32px));margin:34px auto;padding:42px}
.auto-quote-page .field-group{margin:0 0 24px}
.auto-quote-page .field-group label,.auto-quote-page .standalone-label{display:block;margin:0 0 10px;font-weight:700}
.auto-quote-page .field-group input,.auto-quote-page .field-group select{width:100%;min-width:0}
.auto-quote-page .two-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.auto-quote-page .suffix-field{display:flex;width:100%}
.auto-quote-page .suffix-field input{border-radius:10px 0 0 10px!important}
.auto-quote-page .suffix-field span{display:flex;align-items:center;padding:0 18px;border:1px solid #d7dde2;border-left:0;border-radius:0 10px 10px 0;background:#f7f9fa;white-space:nowrap}
.auto-quote-page .consent-box{padding:22px;border:1px solid #dbe2e6;border-radius:12px;background:#fafcfc;line-height:1.7}
.auto-quote-page .date-field,.auto-quote-page .rent-extra,.auto-quote-page .basement-size{display:none}
.auto-quote-page .date-field.show,.auto-quote-page .rent-extra.show,.auto-quote-page .basement-size.show{display:block}
.auto-quote-page .form-actions{display:flex!important;justify-content:space-between;gap:18px;align-items:center;flex-wrap:nowrap}
.auto-quote-page .form-actions.is-single{justify-content:flex-end}
.auto-quote-page .btn{background:var(--tiffany)!important;border-color:var(--tiffany)!important;color:#fff!important;min-width:180px}
.auto-quote-page .btn:hover{background:var(--tiffany-dark)!important;border-color:var(--tiffany-dark)!important}
.auto-quote-page .btn-back{background:#fff!important;color:var(--tiffany)!important;border:2px solid var(--tiffany)!important}
.auto-quote-page .btn-back:hover{background:#eafafa!important;color:var(--tiffany-dark)!important}
.auto-quote-page .segmented input:checked+span{border-color:var(--tiffany)!important;background:#e9fbfa!important;color:#066d69!important;box-shadow:0 0 0 2px rgba(10,186,181,.14)}
.auto-quote-page .option-card input:checked+span{border-color:var(--tiffany)!important}


.auto-quote-page .field-error{border-color:#d93025!important;box-shadow:0 0 0 2px rgba(217,48,37,.1)!important}
@media(max-width:700px){
 .auto-quote-page .step-shell{width:calc(100% - 20px);padding:26px 18px;margin:20px auto}
 .auto-quote-page .two-field-grid{grid-template-columns:1fr}
 .auto-quote-page .segmented.three,.auto-quote-page .segmented.two{grid-template-columns:1fr!important}
 .auto-quote-page .form-actions{gap:10px}
 .auto-quote-page .form-actions .btn{min-width:0!important;width:50%!important;padding-left:10px!important;padding-right:10px!important}
 .auto-quote-page .form-actions.is-single .btn{width:100%!important}
 
}


/* === Final original-design restoration === */
html, body { max-width: 100%; overflow-x: hidden !important; }
*, *::before, *::after { box-sizing: border-box; }
body.auto-quote-page .quote-main { width: 100%; overflow-x: clip; }
body.auto-quote-page .quote-form { width: 100%; }
body.auto-quote-page .quote-step { width: 100%; padding: 48px 16px 70px; }
body.auto-quote-page .quote-step > .step-shell {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 56px 64px 46px !important;
  background: #fff !important;
  border: 1px solid #dce5e4 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(19, 74, 73, .08) !important;
  text-align: left;
}
body.auto-quote-page .quote-step > .step-shell > h1 {
  margin: 0 0 38px !important;
  text-align: center !important;
  color: #292929 !important;
  font-size: clamp(30px, 3vw, 43px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
body.auto-quote-page .intro-copy { text-align: center; font-size: 20px; margin-bottom: 28px; }
body.auto-quote-page .field-group,
body.auto-quote-page .standalone-label,
body.auto-quote-page .segmented,
body.auto-quote-page .option-card,
body.auto-quote-page .consent-box,
body.auto-quote-page .rent-extra { width: min(100%, 720px) !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
body.auto-quote-page .field-group { margin-bottom: 27px !important; }
body.auto-quote-page .field-group label,
body.auto-quote-page .standalone-label { display: block; margin-bottom: 10px; color: #252525; font-size: 17px; font-weight: 700; }
body.auto-quote-page .field-group input,
body.auto-quote-page .field-group select,
body.auto-quote-page .field-group textarea {
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 16px !important;
  border: 1px solid #cbd8d7 !important;
  border-bottom: 3px solid #0abab5 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #282828 !important;
  font: inherit !important;
  font-size: 17px !important;
  outline: none !important;
}
body.auto-quote-page .field-group input:focus,
body.auto-quote-page .field-group select:focus { border-color: #0abab5 !important; box-shadow: 0 0 0 3px rgba(10,186,181,.13) !important; }
body.auto-quote-page .suffix-field { display: flex; width: 100%; }
body.auto-quote-page .suffix-field input { border-radius: 3px 0 0 3px !important; }
body.auto-quote-page .suffix-field span { display:flex; align-items:center; padding:0 18px; border:1px solid #cbd8d7; border-left:0; border-bottom:3px solid #0abab5; white-space:nowrap; background:#f7f9f9; }
body.auto-quote-page .two-field-grid { width:min(100%,720px); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
body.auto-quote-page .segmented { gap:14px !important; }
body.auto-quote-page .segmented label span {
  min-height: 58px !important; padding: 14px 18px !important; border: 1.5px solid #0abab5 !important; border-radius: 5px !important; background:#fff !important; color:#252525 !important;
}
body.auto-quote-page .segmented label input:checked + span { background:#0abab5 !important; color:#fff !important; }
body.auto-quote-page .option-card { min-height: 82px !important; margin-bottom: 14px !important; border:1.5px solid #0abab5 !important; border-radius:5px !important; padding:18px 28px !important; }
body.auto-quote-page .consent-box { padding:25px !important; border:1px solid #d7dfdf !important; border-radius:6px !important; background:#fafcfc !important; }
body.auto-quote-page .step-divider {
  display:block !important; width:min(100%,735px) !important; max-width:735px !important; height:1px !important; border:0 !important; margin:38px auto 28px !important; background:#dce5e4 !important;
}
body.auto-quote-page .form-actions {
  width:min(100%,735px) !important; max-width:735px !important; margin:0 auto !important; display:flex !important; justify-content:center !important; align-items:center !important; gap:20px !important;
}
body.auto-quote-page .form-actions .btn {
  width:220px !important; max-width:220px !important; min-width:0 !important; height:60px !important; border-radius:4px !important; font-size:18px !important; font-weight:700 !important; text-transform:none !important;
}
body.auto-quote-page .btn-next,
body.auto-quote-page .calculate-btn { background:#0abab5 !important; border:2px solid #0abab5 !important; color:#fff !important; }
body.auto-quote-page .btn-back { background:#fff !important; border:2px solid #0abab5 !important; color:#079d99 !important; }
body.auto-quote-page .btn:hover { transform:translateY(-1px); }
body.auto-quote-page .form-actions.is-single .btn { width:240px !important; max-width:240px !important; }
body.auto-quote-page .field-error { border-color:#d93025 !important; }

@media (max-width: 700px) {
  body.auto-quote-page .quote-step { padding:24px 10px 42px !important; }
  body.auto-quote-page .quote-step > .step-shell { width:100% !important; padding:32px 16px 28px !important; border-radius:9px !important; }
  body.auto-quote-page .quote-step > .step-shell > h1 { font-size:28px !important; margin-bottom:28px !important; }
  body.auto-quote-page .two-field-grid { grid-template-columns:1fr; gap:0; }
  body.auto-quote-page .segmented.three { grid-template-columns:1fr !important; }
  body.auto-quote-page .form-actions { flex-direction:row !important; gap:10px !important; width:100% !important; }
  body.auto-quote-page .form-actions .btn { flex:1 1 0 !important; width:auto !important; max-width:none !important; height:52px !important; padding:0 10px !important; font-size:16px !important; }
  body.auto-quote-page .form-actions.is-single .btn { flex:0 1 240px !important; }
  body.auto-quote-page .step-divider { margin:30px auto 22px !important; }
  body.auto-quote-page .field-group input, body.auto-quote-page .field-group select { font-size:16px !important; }
}

/* FINAL EXACT 4-ICON TOP BAR */
html,body{max-width:100%;overflow-x:hidden!important}












body.auto-quote-page .step-divider{border:0!important;border-top:1px solid #e4e8ea!important;margin:30px 0 24px!important}
body.auto-quote-page .form-actions{padding-top:0!important}



/* === Professional form consistency overrides === */
.auto-quote-page .header-container{
  max-width: 1180px !important;
  display: grid !important;
  grid-template-columns: minmax(180px,1fr) minmax(220px,1.2fr) minmax(280px,1fr) !important;
  align-items: center !important;
  gap: 20px !important;
}
.auto-quote-page .header-logo,.auto-quote-page .header-title,.auto-quote-page .header-phone{min-width:0 !important;}
.auto-quote-page .header-title{justify-self:center !important; padding:0 !important;}
.auto-quote-page .header-phone{justify-self:end !important; flex-wrap:nowrap !important;}
.auto-quote-page .header-contact-link{color:#fff !important; white-space:nowrap !important;}
.auto-quote-page .header-contact-link:hover{color:#fff !important; opacity:.88;}





.auto-quote-page .step-shell{max-width:620px !important;}
.auto-quote-page .start-shell{max-width:680px !important;}
.auto-quote-page .field-group,.auto-quote-page .two-field-grid .field-group{width:100% !important; min-width:0 !important;}
.auto-quote-page .two-field-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px !important;}
.auto-quote-page input:not([type="radio"]):not([type="checkbox"]),
.auto-quote-page select,
.auto-quote-page textarea,
.auto-quote-page .suffix-field{
  width:100% !important; height:52px !important; min-height:52px !important; border-radius:4px !important;
}
.auto-quote-page input[type="date"]{padding:0 16px !important;border:1px solid var(--line) !important;background:#fff !important;}
.auto-quote-page .suffix-field{display:flex !important;overflow:hidden !important;border:1px solid var(--line) !important;background:#fff !important;}
.auto-quote-page .suffix-field input{height:50px !important;border:0 !important;flex:1 !important;}
.auto-quote-page .suffix-field span{min-width:82px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-left:1px solid var(--line) !important;}
.auto-quote-page .segmented{border-radius:4px !important;overflow:hidden !important;}
.auto-quote-page .segmented label,.auto-quote-page .segmented span{min-height:52px !important;}
.auto-quote-page .first-page-contact{margin-top:4px !important;}
.auto-quote-page .step-divider{border:0 !important;border-top:1px solid #dfe5e3 !important;margin:32px 0 0 !important;}
.auto-quote-page .form-actions{width:100% !important;padding:24px 0 0 !important;margin:0 !important;}
.auto-quote-page .btn{min-height:52px !important;border-radius:4px !important;}
.auto-quote-page .consent-box{border:1px solid #dfe5e3 !important;border-radius:6px !important;padding:24px !important;background:#fafcfc !important;}
.auto-quote-page .consent-box p{line-height:1.7 !important;margin-bottom:20px !important;}
@media(max-width:720px){
  .auto-quote-page .header-container{grid-template-columns:auto 1fr auto !important;padding:0 14px !important;gap:10px !important;}
  .auto-quote-page .header-title{font-size:13px !important;}
  .auto-quote-page .header-phone{gap:8px !important;}
  .auto-quote-page .header-contact-link .phone-number{display:none !important;}
  .auto-quote-page .phone-icon{display:inline-block !important;}
  
  
  
  .auto-quote-page .two-field-grid{grid-template-columns:1fr !important;gap:0 !important;}
  .auto-quote-page .segmented.three{grid-template-columns:1fr !important;}
  .auto-quote-page .form-actions{grid-template-columns:1fr 1fr !important;gap:12px !important;}
  .auto-quote-page .form-actions.is-single{grid-template-columns:1fr !important;}
}

/* Professional multi-house review page */
.review-shell{max-width:860px!important}.review-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:26px}.review-heading-row h1{margin-bottom:8px}.review-add-btn{width:auto!important;min-width:225px;background:#14b8b2!important;color:#fff!important;border:0!important;white-space:nowrap}.review-card{overflow:hidden;margin:0 0 28px;border:1px solid #bce9e7;border-radius:24px;background:#effcfb}.review-card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 34px 22px;border-bottom:1px solid #d7eeee}.review-card-head h2{margin:0 0 6px;font-size:30px;line-height:1.15}.review-card-head p{margin:0;color:#5f6974}.review-card-body,.review-house-item{display:flex;align-items:center;gap:22px;padding:26px 34px}.review-main-icon{display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;color:#07948f;font-size:28px}.review-person-row strong,.review-house-copy strong{display:block;margin-bottom:5px;font-size:20px}.review-person-row p,.review-house-copy p{margin:0;color:#66717b;line-height:1.55}.review-house-copy{min-width:0;flex:1}.review-house-copy small{display:block;margin-top:5px;color:#78838c}.review-house-item+.review-house-item{border-top:1px solid #d7eeee}.review-change-btn{border:0;background:transparent;color:#f01818;font-size:17px;font-weight:700;cursor:pointer}.review-extra-fields{padding:28px 34px}.review-extra-fields textarea{min-height:145px;resize:vertical}.optional-label{font-size:.72em;font-weight:500;color:#65707b}.review-houses-list:empty:before{display:block;padding:28px 34px;color:#68737c;content:"No houses have been added yet."}
@media(max-width:700px){.review-heading-row{display:block}.review-add-btn{width:100%!important;margin-top:16px}.review-card{border-radius:18px}.review-card-head{padding:22px 20px}.review-card-head h2{font-size:25px}.review-card-body,.review-house-item{align-items:flex-start;padding:22px 18px;gap:12px}.review-main-icon{flex-basis:38px;width:38px;height:38px;font-size:22px}.review-change-btn{margin-left:auto}.review-extra-fields{padding:22px 18px}}

/* === FINAL REFERENCE ALIGNMENT + COMPACT PROFESSIONAL REVIEW === */














body.auto-quote-page .quote-step{padding:44px 16px 68px !important;}
body.auto-quote-page .quote-step > .step-shell{
  width:min(100%,780px) !important;
  max-width:780px !important;
  padding:48px 54px 40px !important;
}
body.auto-quote-page .quote-step > .step-shell > h1{
  margin-bottom:28px !important;
  font-size:clamp(30px,3vw,40px) !important;
}
body.auto-quote-page .intro-copy{margin-bottom:26px !important;font-size:18px !important;}
body.auto-quote-page .field-group,
body.auto-quote-page .standalone-label,
body.auto-quote-page .segmented,
body.auto-quote-page .option-card,
body.auto-quote-page .consent-box,
body.auto-quote-page .rent-extra,
body.auto-quote-page .two-field-grid{
  width:min(100%,560px) !important;
  max-width:560px !important;
}
body.auto-quote-page .field-group{margin-bottom:22px !important;}
body.auto-quote-page .two-field-grid{gap:16px !important;}
body.auto-quote-page .field-group input,
body.auto-quote-page .field-group select,
body.auto-quote-page .field-group textarea{
  height:52px !important;
  min-height:52px !important;
}
body.auto-quote-page .step-divider,
body.auto-quote-page .form-actions{
  width:min(100%,620px) !important;
  max-width:620px !important;
}

/* Review page */
body.auto-quote-page .review-shell{
  width:min(100%,900px) !important;
  max-width:900px !important;
  padding:46px 50px 42px !important;
  background:#fff !important;
}
body.auto-quote-page .review-heading-row{
  align-items:center !important;
  margin-bottom:28px !important;
  padding-bottom:24px !important;
  border-bottom:1px solid #e7ecec !important;
}
body.auto-quote-page .review-heading-row h1{
  margin:0 0 7px !important;
  font-size:38px !important;
  text-align:left !important;
}
body.auto-quote-page .review-heading-row p{margin:0 !important;color:#657078 !important;font-size:16px !important;}
body.auto-quote-page .review-add-btn{
  width:auto !important;
  min-width:220px !important;
  height:54px !important;
  padding:0 24px !important;
  border-radius:8px !important;
  box-shadow:0 8px 18px rgba(10,186,181,.18) !important;
}
body.auto-quote-page .review-card{
  margin-bottom:22px !important;
  border:1px solid #c7e9e7 !important;
  border-radius:16px !important;
  background:#f1fbfa !important;
  box-shadow:0 7px 20px rgba(22,91,88,.06) !important;
}
body.auto-quote-page .review-card-head{
  padding:24px 28px 19px !important;
  background:linear-gradient(180deg,#f6fdfd 0%,#eefafa 100%) !important;
}
body.auto-quote-page .review-card-head h2{font-size:28px !important;}
body.auto-quote-page .review-card-body,
body.auto-quote-page .review-house-item{
  min-height:110px !important;
  padding:22px 28px !important;
  background:rgba(255,255,255,.38) !important;
}
body.auto-quote-page .review-house-item:hover{background:#fff !important;}
body.auto-quote-page .review-main-icon{
  flex:0 0 52px !important;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  background:#d9f6f4 !important;
  color:#07948f !important;
  font-size:23px !important;
}
body.auto-quote-page .review-house-copy strong,
body.auto-quote-page .review-person-row strong{font-size:19px !important;color:#242a2d !important;}
body.auto-quote-page .review-change-btn{
  min-width:82px !important;
  padding:9px 14px !important;
  border:1px solid #efb7b7 !important;
  border-radius:7px !important;
  background:#fff !important;
  color:#e31d24 !important;
  font-size:15px !important;
}
body.auto-quote-page .review-change-btn:hover{background:#fff4f4 !important;border-color:#e31d24 !important;}
body.auto-quote-page .review-extra-fields{padding:24px 28px !important;}
body.auto-quote-page .review-extra-fields .field-group{width:100% !important;max-width:none !important;}
body.auto-quote-page .review-extra-fields textarea{height:135px !important;min-height:135px !important;border-bottom:1px solid #cbd8d7 !important;}

@media(max-width:700px){
 
 
 
 
 
 
 
 
 body.auto-quote-page .quote-step{padding:24px 10px 42px !important;}
 body.auto-quote-page .quote-step > .step-shell{padding:30px 16px 26px !important;}
 body.auto-quote-page .review-shell{padding:28px 14px 24px !important;}
 body.auto-quote-page .review-heading-row{display:block !important;}
 body.auto-quote-page .review-heading-row h1{font-size:30px !important;text-align:center !important;}
 body.auto-quote-page .review-heading-row p{text-align:center !important;}
 body.auto-quote-page .review-add-btn{width:100% !important;margin-top:18px !important;}
 body.auto-quote-page .review-card{border-radius:12px !important;}
 body.auto-quote-page .review-card-head{padding:20px 18px 16px !important;}
 body.auto-quote-page .review-card-head h2{font-size:24px !important;}
 body.auto-quote-page .review-card-body,body.auto-quote-page .review-house-item{padding:19px 16px !important;gap:12px !important;}
 body.auto-quote-page .review-main-icon{flex-basis:42px !important;width:42px !important;height:42px !important;font-size:19px !important;}
 body.auto-quote-page .review-change-btn{min-width:70px !important;padding:7px 9px !important;font-size:13px !important;}
}

/* =========================================================
   FINAL ALIGNMENT POLISH — progress, typography and divider
   ========================================================= */








/* Consistent content alignment on every form page */
body.auto-quote-page .step-shell,
body.auto-quote-page .step-shell h1,
body.auto-quote-page .step-shell h2,
body.auto-quote-page .step-shell p,
body.auto-quote-page .step-shell label,
body.auto-quote-page .step-shell small{
  text-align: left;
}
body.auto-quote-page .step-shell > *{
  max-width: 100%;
}
body.auto-quote-page .field-group,
body.auto-quote-page .standalone-label,
body.auto-quote-page .segmented,
body.auto-quote-page .two-field-grid,
body.auto-quote-page .date-row,
body.auto-quote-page .question-row,
body.auto-quote-page .consent-box{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Divider above Back / Next matches the exact field width */
body.auto-quote-page .step-divider{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 1px !important;
  margin: 30px 0 22px !important;
  border: 0 !important;
  background: #e2e8e5 !important;
}
body.auto-quote-page .form-actions{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.auto-quote-page .form-actions::before{
  content: none !important;
  display: none !important;
}

@media (max-width: 700px){
  
  
  
  
  body.auto-quote-page .step-divider{
    margin-top: 26px !important;
    margin-bottom: 18px !important;
  }
}

/* === EXACT FINAL ALIGNMENT FIX === */






/* One exact content grid on every normal form page */
body.auto-quote-page .quote-step > .step-shell:not(.review-shell){
  --form-grid-width: 620px;
}
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h1,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h2,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .intro-copy,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .field-group,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .two-field-grid,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .segmented,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .standalone-label,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .option-card,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .consent-box,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .rent-extra,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .step-divider,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .form-actions{
  width:min(100%, var(--form-grid-width)) !important;
  max-width:var(--form-grid-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h1,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h2,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .intro-copy{
  text-align:left !important;
}
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .intro-copy{
  margin-top:0 !important;
}
body.auto-quote-page .two-field-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
}
body.auto-quote-page .two-field-grid > .field-group{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.auto-quote-page .segmented.three{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  overflow:visible !important;
}
body.auto-quote-page .segmented.three label,
body.auto-quote-page .segmented.three span{
  width:100% !important;
  min-width:0 !important;
}
body.auto-quote-page .step-divider{
  height:1px !important;
  margin-top:30px !important;
  margin-bottom:22px !important;
  background:#dfe5e3 !important;
}
body.auto-quote-page .form-actions{
  padding-top:0 !important;
}

@media(max-width:700px){
  
  body.auto-quote-page .two-field-grid,
  body.auto-quote-page .segmented.three{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* === PROGRESS CONNECTOR RESTORED — visible only between icon circles === */






/* === FINAL PROGRESS LINE FIX: connectors stay strictly between icon borders === */











/* === UNIFIED FORM WIDTH + CENTERED TITLES (FINAL) === */
body.auto-quote-page .quote-step > .step-shell:not(.review-shell){
  --form-grid-width: 620px;
}

/* Every main form block uses the same width as the phone-number field */
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h1,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h2,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .intro-copy,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .field-group,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .two-field-grid,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .segmented,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .standalone-label,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .option-card,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .consent-box,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .rent-extra,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .moving-question,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .first-page-contact,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .step-divider,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .form-actions{
  width: min(100%, var(--form-grid-width)) !important;
  max-width: var(--form-grid-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* All page titles and their supporting text are centered */
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h1,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > h2,
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .intro-copy{
  text-align: center !important;
}

/* All controls fully fill the common field width */
body.auto-quote-page .step-shell:not(.review-shell) .field-group,
body.auto-quote-page .step-shell:not(.review-shell) .suffix-field,
body.auto-quote-page .step-shell:not(.review-shell) input:not([type="radio"]):not([type="checkbox"]),
body.auto-quote-page .step-shell:not(.review-shell) select,
body.auto-quote-page .step-shell:not(.review-shell) textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* First and last name remain equal halves inside the same phone-width row */
body.auto-quote-page .step-shell:not(.review-shell) .two-field-grid{
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.auto-quote-page .step-shell:not(.review-shell) .two-field-grid > .field-group{
  width: 100% !important;
  max-width: none !important;
}

/* Divider above buttons exactly matches the phone-number field width */
body.auto-quote-page .quote-step > .step-shell:not(.review-shell) > .step-divider{
  width: min(100%, var(--form-grid-width)) !important;
  max-width: var(--form-grid-width) !important;
}

@media (max-width: 700px){
  body.auto-quote-page .step-shell:not(.review-shell) .two-field-grid{
    grid-template-columns: 1fr !important;
  }
}


/* === REQUESTED LAYOUT UPDATE === */
body.auto-quote-page .quote-step > .step-shell:not(.review-shell){
  --form-grid-width: 560px !important;
}
body.auto-quote-page .review-shell{
  width:min(100%,1080px) !important;
  max-width:1080px !important;
  padding-left:56px !important;
  padding-right:56px !important;
}
body.auto-quote-page .review-shell > .step-divider,
body.auto-quote-page .review-shell > .form-actions{
  width:100% !important;
  max-width:none !important;
}
@media (max-width:700px){
  body.auto-quote-page .review-shell{
    width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}


/* === Progress bar update: Personal removed, connectors run edge-to-edge === */






/* === FINAL DYNAMIC PROGRESS CONNECTORS ===
   Every page shows the connector in a medium grey (half-black look).
   As soon as a stage is completed, its connector becomes red. */








/* =========================================================
   FINAL EDGE-TO-EDGE PROGRESS CONNECTORS
   Line starts at current circle edge and ends at next circle edge.
   Grey by default; completed connector turns red.
   ========================================================= */










/* === VERIFIED CONNECTOR IMPLEMENTATION (2026-07-28) ===
   Real connector elements are placed between the three icon circles.
   Each line occupies only the gap between adjacent circle edges. */








/* === FINAL USER TWEAK: thinner connectors matching icon border colors === */





/* === FINAL PROGRESS SHADE: newest completed line red, older completed line blackish === */




/* Personal stage + added stepwise personal fields */



.mortgage-count-wrap,.claims-count-wrap,.repeat-list{display:none;}
.mortgage-count-wrap.show,.claims-count-wrap.show,.repeat-list.show{display:block;}
.repeat-list{margin-top:24px;}
.repeat-card{padding:20px;margin:18px 0;border:1px solid #e1e5e8;border-radius:14px;background:#fff;}
.repeat-card h3{margin:0 0 16px;font-size:18px;}
.checkbox-list{display:grid;gap:10px;margin-top:12px;}
.checkbox-list .option-card{margin:0;}
.floater-actions{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:8px;}
.plain-radios{display:flex;gap:20px;flex-wrap:wrap;}
.plain-radios label{display:flex;align-items:center;gap:7px;}
.remove-floater{border:0;background:transparent;color:#ed1c24;font-weight:700;cursor:pointer;padding:8px 0;}
@media(max-width:700px){
 
 .floater-actions{flex-direction:column;}
}


/* === USER REQUESTED FINAL FIXES === */
/* One connector only: no pseudo-lines or secondary progress tracks. */





.save-status{max-width:560px;margin:16px auto 0;min-height:22px;text-align:center;font-size:14px;font-weight:700}.save-status[data-state="saving"]{opacity:.7}.save-status[data-state="saved"]{color:#207a3a}.save-status[data-state="error"]{color:#b42318}.calculate-btn:disabled,.btn-next:disabled{opacity:.65;cursor:not-allowed}
.pac-container{z-index:999999!important;font-family:"Open Sans",sans-serif}

/* Submission and additional-house refinements */
.thank-you-page{display:none;max-width:760px;margin:55px auto 90px;padding:0 20px;text-align:center}
.thank-you-page.is-visible{display:block}
.thank-you-card{background:#fff;border-radius:18px;padding:55px 30px;box-shadow:0 10px 35px rgba(0,0,0,.08)}
.thank-you-icon{font-size:64px;color:#df1f36;margin-bottom:18px}
.thank-you-card h1{margin:0 0 14px;font-size:38px}
.thank-you-card p{font-size:18px;margin:7px 0}
.thank-you-subtext{color:#666}
.btn:disabled{cursor:wait;opacity:.72}
body.additional-house-mode .first-page-contact{display:none!important}

/* Strong thank-you visibility guard */
html body.auto-quote-page #thankYouPage[hidden],
html body.auto-quote-page #thankYouPage:not(.is-visible){
  display:none!important;
}
html body.auto-quote-page #thankYouPage.is-visible:not([hidden]){
  display:block!important;
}
html body.auto-quote-page form[hidden]{
  display:none!important;
}

/* Referral radio cards */
.auto-quote-page .review-extra-fields{
  max-width: 620px;
  margin: 0 auto;
}
.auto-quote-page .referral-fieldset{
  border:0;
  padding:0;
  margin:0 0 26px;
  min-width:0;
}
.auto-quote-page .referral-fieldset legend{
  display:block;
  width:100%;
  margin:0 0 12px;
  color:#222;
  font-size:16px;
  font-weight:700;
}
.auto-quote-page .required-mark{color:#e60000}
.auto-quote-page .referral-radio-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.auto-quote-page .referral-radio{display:block;cursor:pointer}
.auto-quote-page .referral-radio input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.auto-quote-page .referral-radio span{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  border:1.5px solid #cfd9d5;
  border-radius:9px;
  background:#fff;
  color:#26352f;
  font-weight:700;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auto-quote-page .referral-radio span i{
  width:22px;
  text-align:center;
  color:#0abab5;
  font-size:18px;
}
.auto-quote-page .referral-radio input:checked + span{
  border-color:#0abab5;
  background:#eafafa;
  box-shadow:0 0 0 2px rgba(10,186,181,.14);
}
.auto-quote-page .referral-radio input:focus-visible + span{
  outline:3px solid rgba(10,186,181,.24);
  outline-offset:2px;
}
@media(max-width:620px){
  .auto-quote-page .referral-radio-grid{grid-template-columns:1fr}
}


/* === TOP PROGRESS ICON FIX: exact SVG artwork inside true circular borders === */





/* ===== FINAL TOP PROGRESS BAR FIX: exact uploaded SVGs + true circles ===== */


/* Keep every supplied progress icon visible. */



/* ================================================================
   FORM FIELD WIDTH — CLEAN SINGLE SOURCE OF TRUTH
   All regular fields, grouped controls, divider and navigation rows
   share the same centered width. Review cards remain full-width.
   ================================================================ */
html body.auto-quote-page .quote-step .step-shell:not(.review-shell){
  --form-content-width: 520px;
}

html body.auto-quote-page .quote-step .step-shell:not(.review-shell) > :is(
  .field-group,
  .two-field-grid,
  .date-grid,
  .segmented,
  .option-list,
  .checkbox-list,
  .standalone-label,
  .first-page-contact,
  .consent-box,
  .repeat-list,
  .co-owner-fields,
  .rent-extra,
  .moving-question,
  .step-divider,
  .form-actions
){
  width: min(100%, var(--form-content-width)) !important;
  max-width: var(--form-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html body.auto-quote-page .quote-step .step-shell:not(.review-shell) :is(
  .field-group,
  .input-wrapper,
  .suffix-field,
  .searchable-select-group,
  .dropdown-custom-input,
  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea
){
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.auto-quote-page .quote-step .step-shell:not(.review-shell) > .step-divider{
  margin-top: 32px !important;
  margin-bottom: 0 !important;
}

html body.auto-quote-page .quote-step .step-shell:not(.review-shell) > .form-actions{
  padding-top: 24px !important;
}

@media (max-width: 620px){
  html body.auto-quote-page .quote-step .step-shell:not(.review-shell){
    --form-content-width: 100%;
  }
}

/* ================================================================
   TOP QUOTE PROGRESS BAR — CLEAN SINGLE SOURCE OF TRUTH
   All older stage/progress rules were removed from this stylesheet.
   ================================================================ */
body.auto-quote-page .quote-stagebar.quote-icon-stagebar {
  position: sticky !important;
  top: 70px !important;
  z-index: 90 !important;
  width: 100% !important;
  padding: 12px 16px 9px !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #eceff1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.auto-quote-page .quote-icon-stagebar .stagebar-inner {
  --progress-circle-size: 46px;
  width: 100% !important;
  max-width: 780px !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns:
    var(--progress-circle-size) minmax(26px, 1fr)
    var(--progress-circle-size) minmax(26px, 1fr)
    var(--progress-circle-size) minmax(26px, 1fr)
    var(--progress-circle-size) !important;
  align-items: start !important;
  column-gap: 0 !important;
  box-sizing: border-box !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-item {
  width: var(--progress-circle-size) !important;
  min-width: var(--progress-circle-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-item::before,
body.auto-quote-page .quote-icon-stagebar .stage-item::after {
  content: none !important;
  display: none !important;
}

/* Every icon holder is forced to a true square, therefore 50% is a circle. */
body.auto-quote-page .quote-icon-stagebar .stage-icon {
  width: var(--progress-circle-size) !important;
  height: var(--progress-circle-size) !important;
  min-width: var(--progress-circle-size) !important;
  min-height: var(--progress-circle-size) !important;
  max-width: var(--progress-circle-size) !important;
  max-height: var(--progress-circle-size) !important;
  flex: 0 0 var(--progress-circle-size) !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 2px solid #d8dde0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: #fff !important;
  box-shadow: 0 0 0 6px #fff !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-icon > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 26px !important;
  max-height: 26px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: .45 !important;
  filter: grayscale(1) !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-item.is-active .stage-icon,
body.auto-quote-page .quote-icon-stagebar .stage-item.is-done .stage-icon {
  border-color: #ed1c24 !important;
  background: #fff !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-item.is-active .stage-icon > img,
body.auto-quote-page .quote-icon-stagebar .stage-item.is-done .stage-icon > img {
  opacity: 1 !important;
  filter: none !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-label {
  width: max-content !important;
  max-width: 90px !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  color: #a8afb4 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-item.is-active .stage-label,
body.auto-quote-page .quote-icon-stagebar .stage-item.is-done .stage-label {
  color: #ed1c24 !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-connector {
  width: 100% !important;
  height: 2px !important;
  min-width: 0 !important;
  align-self: start !important;
  margin: calc(var(--progress-circle-size) / 2 - 1px) 0 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #d8dde0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-connector.is-done,
body.auto-quote-page .quote-icon-stagebar .stage-connector.is-current-complete,
body.auto-quote-page .quote-icon-stagebar .stage-connector.is-past-complete {
  background: #ed1c24 !important;
}

body.auto-quote-page .quote-icon-stagebar .stage-progress,
body.auto-quote-page .quote-icon-stagebar .stage-progress span,
body.auto-quote-page .quote-icon-stagebar .stage-number {
  display: none !important;
}

@media (max-width: 720px) {
  body.auto-quote-page .quote-stagebar.quote-icon-stagebar {
    top: 58px !important;
    padding: 10px 10px 7px !important;
  }

  body.auto-quote-page .quote-icon-stagebar .stagebar-inner {
    --progress-circle-size: 38px;
    max-width: 440px !important;
    grid-template-columns:
      var(--progress-circle-size) minmax(12px, 1fr)
      var(--progress-circle-size) minmax(12px, 1fr)
      var(--progress-circle-size) minmax(12px, 1fr)
      var(--progress-circle-size) !important;
  }

  body.auto-quote-page .quote-icon-stagebar .stage-icon {
    padding: 7px !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px #fff !important;
  }

  body.auto-quote-page .quote-icon-stagebar .stage-icon > img {
    max-width: 22px !important;
    max-height: 22px !important;
  }

  body.auto-quote-page .quote-icon-stagebar .stage-label {
    max-width: 68px !important;
    margin-top: 5px !important;
    font-size: 11px !important;
  }
}

/* ================================================================
   FINAL UNIFORM FIELD WIDTH OVERRIDE
   Every visible form field and field container uses one exact width.
   ================================================================ */
html body.auto-quote-page .quote-step .step-shell:not(.review-shell){
  --uniform-field-width: 520px !important;
}

html body.auto-quote-page .quote-step .step-shell:not(.review-shell) > :is(
  .field-group,
  .first-page-contact,
  .two-field-grid,
  .date-grid,
  .segmented,
  .checkbox-list,
  .option-card,
  .moving-question,
  .rent-extra,
  .co-owner-fields,
  .mortgage-count-wrap,
  .claims-count-wrap,
  .repeat-list,
  .consent-box,
  .standalone-label,
  #claimsContainer,
  #floatersContainer,
  .step-divider,
  .form-actions
),
html body.auto-quote-page .quote-step .step-shell:not(.review-shell) .first-page-contact > *,
html body.auto-quote-page .quote-step .step-shell:not(.review-shell) .rent-extra > *,
html body.auto-quote-page .quote-step .step-shell:not(.review-shell) .co-owner-fields > *,
html body.auto-quote-page .quote-step .step-shell:not(.review-shell) .mortgage-count-wrap > *,
html body.auto-quote-page .quote-step .step-shell:not(.review-shell) #claimsContainer > *,
html body.auto-quote-page .quote-step .step-shell:not(.review-shell) #floatersContainer > *{
  width: min(100%, var(--uniform-field-width)) !important;
  max-width: var(--uniform-field-width) !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* No half-width exceptions: every field is the same full width. */
html body.auto-quote-page .quote-step .step-shell:not(.review-shell) .two-field-grid{
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

html body.auto-quote-page .quote-step .step-shell:not(.review-shell) :is(
  .field-group,
  .input-wrapper,
  .suffix-field,
  .searchable-select-group,
  .dropdown-custom-input,
  input:not([type="radio"]):not([type="checkbox"]),
  select,
  textarea
){
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 620px){
  html body.auto-quote-page .quote-step .step-shell:not(.review-shell){
    --uniform-field-width: 100% !important;
  }
}


/* Address reuse option shown only for home/tenant quotes linked from auto. */
.linked-car-address-choice { margin: 0 0 18px; }
.linked-car-address-choice[hidden] { display: none !important; }
input[name="property_address"][readonly] { background: #f5f7f8; cursor: default; }

/* Added missing house fields: compact, manageable layout */
body.auto-quote-page .details-panel{margin-top:28px;padding:22px;border:1px solid #dce9e7;border-radius:12px;background:#f8fcfb}
body.auto-quote-page .details-panel h2{margin:0 0 20px;font-size:23px;line-height:1.3;text-align:left}
body.auto-quote-page .compact-grid{gap:18px 22px;align-items:start}
body.auto-quote-page .coverage-building-option{margin-top:22px}
body.auto-quote-page .is-hidden{display:none!important}
@media(max-width:700px){
 body.auto-quote-page .details-panel{padding:16px 13px;margin-left:-2px;margin-right:-2px}
 body.auto-quote-page .details-panel h2{font-size:20px}
 body.auto-quote-page .compact-grid{grid-template-columns:1fr!important;gap:6px}
}

/* Keep newly added technical fields visually identical to the original fields. */
body.auto-quote-page .details-panel{margin-top:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.auto-quote-page .details-panel h2{margin:28px 0 22px!important;font-size:inherit!important;line-height:1.4!important;text-align:left!important;color:inherit!important}
@media(max-width:700px){body.auto-quote-page .details-panel{margin-left:0!important;margin-right:0!important;padding:0!important}}


/* Split DOB dropdowns. Hidden original fields keep backend payload names unchanged. */
body.auto-quote-page .split-date-field .split-date-row{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:12px;width:100%}
body.auto-quote-page .split-date-field .split-date-row select{width:100%;min-width:0;height:52px;border:1px solid #cfcfcf;border-radius:4px;background:#fff;padding:0 12px;font:inherit;color:#333}
body.auto-quote-page .split-date-field .split-date-row select:focus{outline:none;border-color:#0abab5;box-shadow:0 0 0 2px rgba(10,186,181,.12)}
@media(max-width:520px){body.auto-quote-page .split-date-field .split-date-row{grid-template-columns:1fr;gap:10px}}

/* === Mobile monitored-systems card overflow fix (2026-09-08) ===
   Keep checkbox + option text inside the teal card on narrow screens. */
body.auto-quote-page .checkbox-list{
  width:min(100%, 520px) !important;
  max-width:520px !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
body.auto-quote-page .checkbox-list .option-card{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
body.auto-quote-page .checkbox-list .option-card > input[type="checkbox"]{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  flex:0 0 28px !important;
  margin:0 !important;
}
body.auto-quote-page .checkbox-list .option-card > span{
  display:block !important;
  position:static !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  margin:0 !important;
  padding:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  line-height:1.4 !important;
  box-sizing:border-box !important;
}
@media (max-width:620px){
  body.auto-quote-page .checkbox-list{width:100% !important;max-width:100% !important;}
  body.auto-quote-page .checkbox-list .option-card{
    min-height:72px !important;
    padding:16px !important;
    gap:14px !important;
  }
  body.auto-quote-page .checkbox-list .option-card > span{
    font-size:16px !important;
  }
}