/* /Components/Controls/AgentContactView.razor.rz.scp.css */
/* ============================================
   AgentContactView — agent contact overlay
   ============================================ */

.agent-contact-container[b-u07c7a76rk] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg) var(--spacing-xl);
  gap: var(--spacing-xl);
}

/* ============================================
   Loading State
   ============================================ */
.agent-contact-loading[b-u07c7a76rk] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-3xl) 0;
}

/* ============================================
   Card
   ============================================ */
.agent-contact-card[b-u07c7a76rk] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-shadow:
    0px 3px 1px 0px rgba(51, 51, 51, 0.1),
    0px 2px 2px 0px rgba(51, 51, 51, 0.07),
    0px 1px 5px 0px rgba(51, 51, 51, 0.06);
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
  width: 100%;
}

/* ============================================
   Header
   ============================================ */
.agent-contact-header[b-u07c7a76rk] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.agent-contact-header[b-u07c7a76rk]  .material-icon {
  color: var(--color-primary);
}

.agent-contact-title[b-u07c7a76rk] {
  font-size: 21px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
  line-height: 24px;
  letter-spacing: -0.5px;
  margin: 0;
}

/* ============================================
   Phone Number
   ============================================ */
.agent-contact-phone-number[b-u07c7a76rk] {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 29px;
  letter-spacing: -0.5px;
}

/* ============================================
   Call Button
   ============================================ */
.agent-contact-call-btn[b-u07c7a76rk] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  max-width: 320px;
}

/* ============================================
   Schedule Button
   ============================================ */
.agent-contact-schedule-btn[b-u07c7a76rk] {
  width: 100%;
  max-width: 320px;
}

/* ============================================
   Error State
   ============================================ */
.agent-contact-error[b-u07c7a76rk] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  color: var(--color-text-muted);
}

/* ============================================
   Hours of Operation
   ============================================ */
.agent-contact-hours[b-u07c7a76rk] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.agent-contact-hours-title[b-u07c7a76rk] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  line-height: 23px;
  margin: 0;
}

.agent-contact-hours-list[b-u07c7a76rk] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.agent-contact-hours-row[b-u07c7a76rk] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) 0;
}

.agent-contact-hours-day[b-u07c7a76rk] {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: rgba(0, 0, 0, 0.87);
  line-height: 18px;
}

.agent-contact-hours-time[b-u07c7a76rk] {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 18px;
}

.agent-contact-hours-tz-note[b-u07c7a76rk] {
  font-size: var(--font-size-xs);
  font-weight: 400;
  font-style: italic;
  color: rgba(0, 0, 0, 0.54);
  line-height: 16px;
  margin: var(--spacing-xs) 0 0;
  align-self: flex-end;
}

/* ============================================
   Mobile: full-screen takeover

   The card escapes its ancestor .content-container's padding/max-width
   and fills the viewport below the site header. Z-index sits below the
   header (which is z-index: 10) so the header back button remains the
   exit affordance.
   ============================================ */
@media (max-width: 767px) {
  .agent-contact-container[b-u07c7a76rk] {
    position: fixed;
    inset: var(--site-header-height) 0 0 0;
    z-index: 5;
    max-width: none;
    margin: 0;
    /* extra bottom padding so scrolling content clears the footer
       (which sits visually on top via its own z-index on mobile) */
    padding: var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-3xl) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--theme-bg, var(--color-background));
  }
}
/* /Components/Controls/CoverageDetailsExpander.razor.rz.scp.css */
.show-details-btn[b-lv8yvxer57] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-primary);
}

.coverages-container[b-lv8yvxer57] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.coverage-detail-section[b-lv8yvxer57] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--spacing-md);
  width: 100%;
}

.coverage-detail-section .coverage-detail:not(:last-child)[b-lv8yvxer57] {
  margin-bottom: var(--spacing-md);
}

.coverages-header[b-lv8yvxer57] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.coverage-detail[b-lv8yvxer57] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.coverage-detail-label[b-lv8yvxer57] {
  text-align: left;
}

.coverage-detail-subsection[b-lv8yvxer57] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.coverage-detail-value[b-lv8yvxer57] {
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.coverage-detail-per[b-lv8yvxer57] {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: lowercase;
}

.disclaimer-text[b-lv8yvxer57] {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.vehicle-name-header[b-lv8yvxer57] {
  font-weight: 400;
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.vehicle-coverage-rows:not(:last-child)[b-lv8yvxer57] {
  margin-bottom: var(--spacing-md);
}
/* /Components/Controls/ExpandableContainer.razor.rz.scp.css */
.expandable-container[b-a63040po8z] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

/* display: contents on a <button> silently breaks its focusability (despite looking fine in the
   a11y tree), since a box-less element can't be a focus target -- use a full reset instead. */
div.expand-trigger[b-a63040po8z] {
  display: contents;
}

button.expand-trigger[b-a63040po8z] {
  display: block;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.expand-toggle-btn[b-a63040po8z] {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
}

.expandable-content[b-a63040po8z] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
  width: 100%;
}

.expandable-content-sizer[b-a63040po8z] {
  min-height: 0;
}

.expandable-content-wrapper[b-a63040po8z] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* overflow can't be delayed via transition (it flips the instant the class toggles, unlike e.g.
   visibility) -- use a keyframe animation instead to hold `hidden` until the grow finishes. */
@keyframes expandable-content-reveal-overflow-b-a63040po8z {
  0%, 99.9% {
    overflow: hidden;
  }

  100% {
    overflow: visible;
  }
}

.expandable-container.expanded .expandable-content[b-a63040po8z] {
  grid-template-rows: 1fr;
  /* Needed so absolutely-positioned popovers inside ChildContent (e.g. an edit dropdown) aren't
     clipped by the grid-rows sizer's height. */
  overflow: visible;
  /* Collapsing (removing .expanded) drops this animation entirely, reverting instantly to hidden. */
  animation: expandable-content-reveal-overflow-b-a63040po8z 0.3s step-end forwards;
}

.show-more-caret[b-a63040po8z],
[b-a63040po8z] .show-more-caret {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  /* ‹›  — rotate so › points downward as the collapsed "open" cue */
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.expandable-container.expanded .show-more-caret[b-a63040po8z],
.expandable-container.expanded[b-a63040po8z]  .show-more-caret {
  transform: rotate(270deg);
}

@media (prefers-reduced-motion: reduce) {

  .expandable-content[b-a63040po8z] {
    transition: none;
  }

  /* animation isn't inherited from .expandable-content, so it needs its own override here. */
  .expandable-container.expanded .expandable-content[b-a63040po8z] {
    animation: none;
  }

  .show-more-caret[b-a63040po8z],
  [b-a63040po8z] .show-more-caret {
    transition: none;
  }
}
/* /Components/Controls/Icon.razor.rz.scp.css */
.material-icon[b-ob8cg3kx4b] {
  fill: currentColor;
}

svg.icon-xs[b-ob8cg3kx4b] {
  width: 12px;
  height: 12px;
}

svg.icon-sm[b-ob8cg3kx4b] {
  width: 16px;
  height: 16px;
}

svg.icon-med[b-ob8cg3kx4b] {
  width: 20px;
  height: 20px;
}

svg.icon-lg[b-ob8cg3kx4b] {
  width: 24px;
  height: 24px;
}

svg.icon-xl[b-ob8cg3kx4b] {
  width: 32px;
  height: 32px;
}

svg.icon-2xl[b-ob8cg3kx4b] {
  width: 40px;
  height: 40px;
}

svg.icon-3xl[b-ob8cg3kx4b] {
  width: 48px;
  height: 48px;
}
/* /Components/Controls/QuoteDetailCard.razor.rz.scp.css */
/* ============================================
   Quote Card
   ============================================ */
.quote-card[b-38dzn7ggm8] {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-3xl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-2xl);
  width: 100%;
  max-width: 600px;
}

/* ============================================
   Disabled State
   ============================================ */
.quote-card.disabled .dynamic-disabled[b-38dzn7ggm8] {
  color: var(--color-text-disabled);
  border-color: var(--color-text-disabled);
  fill: var(--color-text-disabled);
}

.quote-card.disabled .carrier-label-pill[b-38dzn7ggm8],
.quote-card.disabled .quote-view-details-btn[b-38dzn7ggm8] {
  cursor: not-allowed;
  color: var(--color-text-disabled);
}

@media (hover: hover) and (pointer: fine) {
  .quote-card.disabled .quote-view-details-btn:hover[b-38dzn7ggm8] {
    transform: none;
    background-color: transparent;
  }
}

.quote-card.disabled .carrier-label-pill-chevron[b-38dzn7ggm8] {
  background-color: transparent;
  border-left: 1px solid var(--color-text-disabled);
}

/* ============================================
   Logo
   ============================================ */
.quote-carrier-logo[b-38dzn7ggm8] {
  vertical-align: middle;
  height: 48px;
  object-fit: contain;
  align-items: center;
  width: 100%;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

/* ============================================
   Price
   ============================================ */
.quote-price-details-container[b-38dzn7ggm8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.quote-price-container[b-38dzn7ggm8] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  /* Prevent the card from collapsing during skeleton loading — locks to the
     line-height of the large price text (font-size-4xl × 1.2). */
  min-height: calc(var(--font-size-4xl) * 1.2);
}

.quote-price[b-38dzn7ggm8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--font-size-4xl);
  font-weight: 700;
  font-family: var(--theme-font-display, var(--font-family));
}

/* ============================================
   Price Details
   ============================================ */
.quote-price-terms-container[b-38dzn7ggm8] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.quote-payment-freq[b-38dzn7ggm8] {
  font-weight: 700;
  font-size: var(--font-size-xl);
}

.quote-subtext[b-38dzn7ggm8] {
  font-size: var(--font-size-xs);
}

.quote-savings-badge[b-38dzn7ggm8] {
  color: var(--color-primary-text);
  background-color: var(--color-focus);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-size-xs);
}

/* ============================================
   Coverage Details Button
   ============================================ */
.quote-view-details-btn[b-38dzn7ggm8] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--transition-base),
    background-color var(--transition-base),
    transform var(--transition-base);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  border: none;
  user-select: none;
  font-family: var(--theme-font-ui, var(--font-family));
  background-color: transparent;
  width: 100%;
  max-width: 400px;
}

@media (hover: hover) and (pointer: fine) {
  .quote-view-details-btn:hover[b-38dzn7ggm8] {
    color: var(--color-primary-hover);
    background-color: var(--theme-primary-focus);
    transform: scale(1.02);
  }
}

.quote-view-details-btn:active[b-38dzn7ggm8] {
  transform: scale(0.98);
}

.quote-view-details-btn:focus-visible[b-38dzn7ggm8] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   Carrier Label Selector Pill
   ============================================ */
.carrier-label-pill-container[b-38dzn7ggm8] {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carrier-label-pill[b-38dzn7ggm8] {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: transparent;
  padding: 0;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  overflow: hidden;
  cursor: default;
}

.carrier-label-pill--interactive[b-38dzn7ggm8] {
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .carrier-label-pill--interactive:hover[b-38dzn7ggm8] {
    background-color: var(--color-focus);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
}

.carrier-label-pill--interactive:active[b-38dzn7ggm8] {
  transform: translateY(0) scale(0.98);
}

.carrier-label-pill--interactive:focus-visible[b-38dzn7ggm8] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.carrier-label-pill-label[b-38dzn7ggm8] {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  flex: 1 1 100%;
  padding: var(--spacing-sm);
  color: var(--color-primary-text);
  font-family: var(--theme-font-ui, var(--font-family));
}

.carrier-label-pill-chevron[b-38dzn7ggm8] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-border);
  /* Fixed at 20px — matches the icon glyph size; falls between --spacing-lg (16px)
     and --spacing-xl (24px) so a spacing token would not produce the correct geometry */
  height: 100%;
  width: fit-content;
  padding: var(--spacing-md);
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-primary);
  background-color: var(--color-focus);
}

.carrier-label-pill-chevron.open svg[b-38dzn7ggm8] {
  transform: rotate(180deg);
}

/* ============================================
   Carrier Label Dropdown
   ============================================ */
.carrier-label-dropdown-backdrop[b-38dzn7ggm8] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 999;
  cursor: default;
  animation: fadeIn var(--transition-fast);
}

.carrier-label-dropdown[b-38dzn7ggm8] {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 1000;
  animation: fadeIn var(--transition-fast);
  width: 600px;
  max-width: 400px;
}

.carrier-label-dropdown-item[b-38dzn7ggm8] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  background-color: var(--color-surface);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-family: var(--theme-font-ui, var(--font-family));
}

.carrier-label-dropdown-item:last-child[b-38dzn7ggm8] {
  border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
  .carrier-label-dropdown-item:hover[b-38dzn7ggm8] {
    background-color: var(--color-focus, rgba(87, 71, 248, 0.08));
    transform: scale(1.02);
  }
}

.carrier-label-dropdown-item:active[b-38dzn7ggm8] {
  background-color: var(--color-focus);
}

.carrier-label-dropdown-item:focus-visible[b-38dzn7ggm8] {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.carrier-label-dropdown-item--active[b-38dzn7ggm8] {
  background-color: var(--color-focus, rgba(87, 71, 248, 0.08));
  color: var(--color-primary);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .carrier-label-dropdown-item--active:hover[b-38dzn7ggm8] {
    background-color: var(--color-focus, rgba(87, 71, 248, 0.12));
  }
}

.carrier-label-dropdown-item--active svg[b-38dzn7ggm8] {
  color: var(--color-primary);
}

/* ============================================
   Pre-Quote Teaser State
   ============================================ */
.quote-teaser[b-38dzn7ggm8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: calc(var(--font-size-4xl) * 1.2);
  color: var(--color-text-muted);
}

.quote-teaser-label[b-38dzn7ggm8] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  font-family: var(--theme-font-display, var(--font-family));
}

/* ============================================
   Searching / Quote Loading State
   ============================================ */
.quote-searching[b-38dzn7ggm8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  /* Match the min-height of .quote-price-container to prevent layout shift */
  min-height: calc(var(--font-size-4xl) * 1.2);
}

.quote-searching-label[b-38dzn7ggm8] {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--theme-font-display, var(--font-family));
}

.quote-searching-dots[b-38dzn7ggm8] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.quote-searching-dots span[b-38dzn7ggm8] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-text-muted);
  animation: quote-dot-bounce-b-38dzn7ggm8 1.4s ease-in-out infinite both;
}

.quote-searching-dots span:nth-child(1)[b-38dzn7ggm8] {
  animation-delay: 0s;
}

.quote-searching-dots span:nth-child(2)[b-38dzn7ggm8] {
  animation-delay: 0.16s;
}

.quote-searching-dots span:nth-child(3)[b-38dzn7ggm8] {
  animation-delay: 0.32s;
}

@keyframes quote-dot-bounce-b-38dzn7ggm8 {

  0%,
  60%,
  100% {
    transform: scale(0.7);
    opacity: 0.4;
  }

  30% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ============================================
   Accessibility: Reduced Motion Override
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  .carrier-label-pill--interactive[b-38dzn7ggm8],
  .carrier-label-pill-chevron svg[b-38dzn7ggm8],
  .carrier-label-dropdown[b-38dzn7ggm8],
  .carrier-label-dropdown-backdrop[b-38dzn7ggm8],
  .carrier-label-dropdown-item[b-38dzn7ggm8],
  .quote-searching-dots span[b-38dzn7ggm8] {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }

  .quote-searching-dots span[b-38dzn7ggm8] {
    opacity: 1;
    transform: none;
  }

  .carrier-label-pill-chevron.open svg[b-38dzn7ggm8] {
    transform: rotate(180deg);
  }
}

/* ============================================
   Error State
   ============================================ */
.quote-error-container[b-38dzn7ggm8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xl);
}

.quote-error-text[b-38dzn7ggm8] {
  color: var(--color-text) !important;
  font-size: var(--font-size-lg);
  text-align: center;
}
/* /Components/Controls/ScheduleCallView.razor.rz.scp.css */
/* ============================================
   ScheduleCallView — schedule callback form
   ============================================ */

.schedule-call-container[b-rift2weeyb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-xl);
  gap: var(--spacing-xl);
}

/* ============================================
   Card
   ============================================ */
.schedule-call-card[b-rift2weeyb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-shadow:
    0px 3px 1px 0px rgba(51, 51, 51, 0.1),
    0px 2px 2px 0px rgba(51, 51, 51, 0.07),
    0px 1px 5px 0px rgba(51, 51, 51, 0.06);
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl);
  width: 100%;
}

/* ============================================
   Header
   ============================================ */
.schedule-call-header[b-rift2weeyb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  text-align: center;
}

.schedule-call-header[b-rift2weeyb]  .material-icon {
  color: var(--color-primary);
}

.schedule-call-title[b-rift2weeyb] {
  font-size: 21px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.87);
  line-height: 24px;
  letter-spacing: -0.5px;
  margin: 0;
}

/* ============================================
   Form
   ============================================ */
.schedule-call-form[b-rift2weeyb] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
  max-width: 400px;
}

.schedule-call-field[b-rift2weeyb] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.schedule-call-label[b-rift2weeyb] {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
  line-height: 18px;
}

/* ============================================
   Submit Button
   ============================================ */
.schedule-call-submit[b-rift2weeyb] {
  width: 100%;
  max-width: 400px;
}

/* ============================================
   Success State
   ============================================ */
.schedule-call-success[b-rift2weeyb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  text-align: center;
}

.schedule-call-success[b-rift2weeyb]  .material-icon {
  color: #38A169;
}

.schedule-call-success-message[b-rift2weeyb] {
  font-size: var(--font-size-base);
  color: rgba(0, 0, 0, 0.87);
  line-height: 23px;
  margin: 0;
}

/* ============================================
   Error State
   ============================================ */
.schedule-call-error[b-rift2weeyb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
  color: var(--color-text-muted);
}

/* ============================================
   Mobile: full-screen takeover

   The card escapes its ancestor .content-container's padding/max-width
   and fills the viewport below the site header. Z-index sits below the
   header (which is z-index: 10) so the header back button remains the
   exit affordance to the quotes list. The in-component "Back to contact
   info" buttons are intentional — they navigate to the agent contact
   view (a different destination than the header back).
   ============================================ */
@media (max-width: 767px) {
  .schedule-call-container[b-rift2weeyb] {
    position: fixed;
    inset: var(--site-header-height) 0 0 0;
    z-index: 5;
    max-width: none;
    margin: 0;
    /* extra bottom padding so scrolling content clears the footer
       (which sits visually on top via its own z-index on mobile) */
    padding: var(--spacing-lg) var(--spacing-lg) calc(var(--spacing-3xl) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--theme-bg, var(--color-background));
  }
}
/* /Components/Controls/SecondaryOptionsList.razor.rz.scp.css */
.secondary-options-list[b-3tsdu3mvl2] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-xs);
}

.secondary-option[b-3tsdu3mvl2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .secondary-option:hover[b-3tsdu3mvl2] {
    background-color: var(--color-hover-tint);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
  }

  .secondary-option.selected:hover[b-3tsdu3mvl2] {
    background-color: var(--color-selected-hover-tint);
  }
}

.secondary-option:active[b-3tsdu3mvl2] {
  box-shadow: var(--shadow-card);
}

.secondary-option.selected[b-3tsdu3mvl2] {
  background-color: var(--color-selected-tint);
  color: var(--color-primary);
  box-shadow: var(--shadow-card-selected);
}

.secondary-option:focus-visible[b-3tsdu3mvl2] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* /Components/Layout/DevPanel.razor.rz.scp.css */
.dev-panel[b-uu59fppuwo] {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background-color: #1e1e1e;
    color: #d4d4d4;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dev-panel.visible[b-uu59fppuwo] {
    right: 0;
}

.dev-panel-header[b-uu59fppuwo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #2d2d30;
    border-bottom: 1px solid #3e3e42;
}

.dev-panel-header h4[b-uu59fppuwo] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.dev-panel-close[b-uu59fppuwo] {
    background: none;
    border: none;
    color: #cccccc;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.dev-panel-close:hover[b-uu59fppuwo] {
    background-color: #3e3e42;
    color: #ffffff;
}

.dev-panel-content[b-uu59fppuwo] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dev-panel-section[b-uu59fppuwo] {
    margin-bottom: 24px;
}

.dev-panel-section h5[b-uu59fppuwo] {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #9cdcfe;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dev-panel-value[b-uu59fppuwo] {
    padding: 8px 12px;
    background-color: #252526;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    color: #ce9178;
}

/* Workflow section styles */
.workflow-id[b-uu59fppuwo] {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #3e3e42;
}

.workflow-steps[b-uu59fppuwo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workflow-step[b-uu59fppuwo] {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    border-radius: 2px;
    color: #d4d4d4;
}

.workflow-step.current[b-uu59fppuwo] {
    background-color: #264f78;
    color: #ffffff;
}

.workflow-step .step-index[b-uu59fppuwo] {
    width: 24px;
    text-align: right;
    margin-right: 8px;
    color: #858585;
    flex-shrink: 0;
}

.workflow-step.current .step-index[b-uu59fppuwo] {
    color: #9cdcfe;
}

.workflow-step .step-slug[b-uu59fppuwo] {
    color: #d4d4d4;
}

.workflow-step.current .step-slug[b-uu59fppuwo] {
    color: #ffffff;
}

/* Snapshot navigation bar */
.snapshot-nav[b-uu59fppuwo] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    padding: 4px;
    background-color: #252526;
    border: 1px solid #3e3e42;
    border-radius: 4px;
}

.snapshot-nav-btn[b-uu59fppuwo] {
    background: none;
    border: 1px solid #3e3e42;
    color: #d4d4d4;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.snapshot-nav-btn:hover:not(:disabled)[b-uu59fppuwo] {
    background-color: #3e3e42;
    border-color: #007acc;
}

.snapshot-nav-btn:disabled[b-uu59fppuwo] {
    opacity: 0.3;
    cursor: default;
}

.snapshot-nav-label[b-uu59fppuwo] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 11px;
    color: #d4d4d4;
    overflow: hidden;
    white-space: nowrap;
}

.snapshot-nav-index[b-uu59fppuwo] {
    color: #858585;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

.snapshot-nav-step[b-uu59fppuwo] {
    color: #9cdcfe;
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snapshot-nav-time[b-uu59fppuwo] {
    color: #858585;
    width: 84px;
    text-align: right;
    flex-shrink: 0;
}

.snapshot-nav-current[b-uu59fppuwo] {
    flex: 1;
    text-align: center;
}

.snapshot-nav-sep[b-uu59fppuwo] {
    color: #3e3e42;
    margin: 0 2px;
    flex-shrink: 0;
}

.dev-panel-json[b-uu59fppuwo] {
    margin: 0;
    padding: 12px;
    background-color: #252526;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    color: #d4d4d4;
    overflow-x: auto;
    white-space: pre;
    max-height: 500px;
    overflow-y: auto;
}

/* JSON syntax highlighting — ::deep needed because content is
   injected via MarkupString (not rendered by Blazor, so no scope attribute) */
[b-uu59fppuwo] .dev-panel-json .json-key {
    color: #9cdcfe;
}

[b-uu59fppuwo] .dev-panel-json .json-string {
    color: #ce9178;
}

[b-uu59fppuwo] .dev-panel-json .json-number {
    color: #b5cea8;
}

[b-uu59fppuwo] .dev-panel-json .json-boolean {
    color: #569cd6;
}

[b-uu59fppuwo] .dev-panel-json .json-null {
    color: #569cd6;
}


.dev-panel-hint[b-uu59fppuwo] {
    margin-top: 24px;
    padding: 12px;
    background-color: #2d2d30;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    font-size: 11px;
    color: #858585;
    text-align: center;
}

.dev-panel-hint kbd[b-uu59fppuwo] {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 2px;
    background-color: #3e3e42;
    border: 1px solid #555555;
    border-radius: 3px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 10px;
    color: #cccccc;
}

/* Scrollbar styling for dark theme */
.dev-panel-content[b-uu59fppuwo]::-webkit-scrollbar,
.dev-panel-json[b-uu59fppuwo]::-webkit-scrollbar {
    width: 8px;
}

.dev-panel-content[b-uu59fppuwo]::-webkit-scrollbar-track,
.dev-panel-json[b-uu59fppuwo]::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.dev-panel-content[b-uu59fppuwo]::-webkit-scrollbar-thumb,
.dev-panel-json[b-uu59fppuwo]::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 4px;
}

.dev-panel-content[b-uu59fppuwo]::-webkit-scrollbar-thumb:hover,
.dev-panel-json[b-uu59fppuwo]::-webkit-scrollbar-thumb:hover {
    background: #4e4e4e;
}

/* Tab system */
.dev-panel-tabs[b-uu59fppuwo] {
    display: flex;
    border-bottom: 1px solid #3e3e42;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #424242 transparent;
    /* Scroll shadows: appear only when content overflows left/right */
    background:
        linear-gradient(to right, #252526 20%, transparent) left center / 32px 100%,
        linear-gradient(to left,  #252526 20%, transparent) right center / 32px 100%,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.35), transparent) left center / 12px 100%,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.35), transparent) right center / 12px 100%;
    background-color: #252526;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.dev-panel-tabs[b-uu59fppuwo]::-webkit-scrollbar {
    height: 3px;
}

.dev-panel-tabs[b-uu59fppuwo]::-webkit-scrollbar-track {
    background: transparent;
}

.dev-panel-tabs[b-uu59fppuwo]::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 2px;
}

.dev-panel-tabs[b-uu59fppuwo]::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

.dev-panel-tab[b-uu59fppuwo] {
    background: none;
    border: none;
    color: #d4d4d4;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.dev-panel-tab:hover[b-uu59fppuwo] {
    color: #ffffff;
}

.dev-panel-tab.active[b-uu59fppuwo] {
    color: #9cdcfe;
    border-bottom-color: #9cdcfe;
}

.dev-panel-tab-content[b-uu59fppuwo] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

/* Analytics tab */
.analytics-tab[b-uu59fppuwo] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.analytics-empty[b-uu59fppuwo] {
    padding: 24px;
    text-align: center;
    color: #858585;
    font-style: italic;
}

.analytics-events[b-uu59fppuwo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analytics-event[b-uu59fppuwo] {
    background-color: #252526;
    border: 1px solid #3e3e42;
    border-radius: 4px;
    overflow: hidden;
}

.analytics-event-header[b-uu59fppuwo] {
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    transition: background-color 0.2s;
}

.analytics-event-header:hover[b-uu59fppuwo] {
    background-color: #2d2d30;
}

.analytics-event-caret[b-uu59fppuwo] {
    color: #858585;
    width: 12px;
    flex-shrink: 0;
    font-size: 10px;
}

.analytics-event-type[b-uu59fppuwo] {
    flex: 1;
    text-align: left;
    color: #9cdcfe;
}

.analytics-event-time[b-uu59fppuwo] {
    color: #858585;
    font-size: 11px;
    flex-shrink: 0;
}

.analytics-event-body[b-uu59fppuwo] {
    margin: 0;
    border-top: 1px solid #3e3e42;
    border-radius: 0;
}

.analytics-event-body[b-uu59fppuwo]::-webkit-scrollbar {
    width: 8px;
}

.analytics-event-body[b-uu59fppuwo]::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.analytics-event-body[b-uu59fppuwo]::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 4px;
}

.analytics-event-body[b-uu59fppuwo]::-webkit-scrollbar-thumb:hover {
    background: #4e4e4e;
}

/* Partner Config tab */
.partner-config-empty[b-uu59fppuwo] {
    padding: 24px;
    text-align: center;
    color: #858585;
    font-style: italic;
}

.partner-config-table[b-uu59fppuwo] {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
}

.partner-config-table tr[b-uu59fppuwo] {
    border-bottom: 1px solid #3e3e42;
}

.partner-config-table tr:last-child[b-uu59fppuwo] {
    border-bottom: none;
}

.partner-config-key[b-uu59fppuwo] {
    padding: 6px 8px;
    color: #9cdcfe;
    white-space: nowrap;
    vertical-align: top;
    width: 40%;
}

.partner-config-value[b-uu59fppuwo] {
    padding: 6px 8px;
    color: #ce9178;
    word-break: break-all;
    vertical-align: top;
}
/* /Components/Layout/Footer.razor.rz.scp.css */
.site-footer[b-szhi397b4g] {
  width: 100%;
  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
  background-color: transparent;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
}

.footer-row[b-szhi397b4g] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md, 12px);
  flex-wrap: wrap;
}

/* On mobile, the quote details / agent contact views render as a fixed
   overlay (z-index: 5) that extends to the viewport bottom. Lift the
   footer above the overlay with an opaque background so it stays visible. */
@media (max-width: 767px) {
  .site-footer[b-szhi397b4g] {
    position: relative;
    z-index: 20;
    background-color: var(--theme-bg, var(--color-background));
  }
}

.footer-links[b-szhi397b4g] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
}

.footer-links a[b-szhi397b4g],
.footer-about-toggle[b-szhi397b4g],
.footer-copyright[b-szhi397b4g] {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--theme-footer-text, #8a94a6);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-family);
  transition: color var(--transition-fast, 0.15s ease);
}

.footer-links a[b-szhi397b4g],
.footer-about-toggle[b-szhi397b4g] {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover[b-szhi397b4g],
  .footer-about-toggle:hover[b-szhi397b4g] {
    color: var(--theme-footer-text-hover, #5a6478);
  }
}

.footer-dot[b-szhi397b4g] {
  color: var(--theme-disabled-text, #d1d9e4);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1;
}

.footer-about[b-szhi397b4g] {
  margin: 0;
  margin-inline: auto;
  text-align: center;
  max-width: 720px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .site-footer[b-szhi397b4g] {
    font-size: var(--font-size-xs, 0.75rem);
  }

  .site-footer .footer-links a[b-szhi397b4g],
  .site-footer .footer-about-toggle[b-szhi397b4g],
  .site-footer .footer-copyright[b-szhi397b4g],
  .site-footer .footer-dot[b-szhi397b4g] {
    font-size: var(--font-size-xs, 0.75rem);
  }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-6h10a0lm3h],
.components-reconnect-repeated-attempt-visible[b-6h10a0lm3h],
.components-reconnect-failed-visible[b-6h10a0lm3h],
.components-pause-visible[b-6h10a0lm3h],
.components-resume-failed-visible[b-6h10a0lm3h],
.components-rejoining-animation[b-6h10a0lm3h] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-retrying[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-failed[b-6h10a0lm3h],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-6h10a0lm3h] {
    display: block;
}


#components-reconnect-modal[b-6h10a0lm3h] {
    background-color: var(--color-surface, #FFFFFF);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.06));
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-6h10a0lm3h 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-6h10a0lm3h 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-6h10a0lm3h 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-6h10a0lm3h]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-6h10a0lm3h 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-6h10a0lm3h {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-6h10a0lm3h {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-6h10a0lm3h {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-6h10a0lm3h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-6h10a0lm3h] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-6h10a0lm3h] {
    border: 0;
    background: linear-gradient(91deg, var(--color-gradient-start, #5747f8), var(--color-gradient-end, #00baf1));
    color: var(--color-text-inverse, white);
    padding: 10px 28px;
    border-radius: var(--radius-pill, 9999px);
    font-weight: 500;
    cursor: pointer;
    transition: transform var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease);
    box-shadow: var(--shadow-button, 0 4px 14px rgba(87, 71, 248, 0.25));
}

    #components-reconnect-modal button:hover[b-6h10a0lm3h] {
        transform: scale(1.02);
        box-shadow: var(--shadow-button-hover, 0 6px 20px rgba(87, 71, 248, 0.35));
    }

    #components-reconnect-modal button:active[b-6h10a0lm3h] {
        transform: scale(0.98);
    }

.components-rejoining-animation[b-6h10a0lm3h] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-6h10a0lm3h] {
        position: absolute;
        border: 3px solid var(--color-primary, #5747f8);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-6h10a0lm3h 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-6h10a0lm3h] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-6h10a0lm3h {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SummaryLayout.razor.rz.scp.css */
/* SummaryLayout uses the same shared styles as QuestionLayout
   (main-content-wrapper, content-container, NavBar, Footer).
   No layout-specific overrides needed. */
/* /Components/Layout/WorkflowProgressIndicator.razor.rz.scp.css */
.progress-bar[b-gth4fqper2] {
  width: 100%;
  height: 10px;
  background-color: var(--color-border-light, #E2E8F0);
  overflow: hidden;
}

.progress-fill[b-gth4fqper2] {
  height: 100%;
  background: var(--theme-gradient, linear-gradient(90deg, #5747f8, #00baf1));
  border-radius: 0 5px 5px 0;
  transition: width 0.3s ease;
}

.progress-fill--complete[b-gth4fqper2] {
  border-radius: 0;
}
/* /Components/Pages/ContextSelectionPage.razor.rz.scp.css */
/* Card - Air & Glass: Softer shadow, increased radius */
.context-card[b-bfcd8sc6r9] {
  width: 100%;
  background-color: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-md, 0 8px 30px rgba(0, 0, 0, 0.04));
  overflow: hidden;
}

/* Header - Lighter, more ethereal */
.context-header[b-bfcd8sc6r9] {
  padding: 1.5rem 2rem;
  background-color: var(--color-surface-hover, #F7FAFC);
  border-bottom: 1px solid var(--color-border-light, #EDF2F7);
  text-align: center;
}

.dev-badge[b-bfcd8sc6r9] {
  display: inline-block;
  padding: 4px 10px;
  background-color: var(--color-text-muted, rgba(26, 32, 44, 0.6));
  color: var(--color-text-inverse, #fff);
  font-size: var(--font-size-xs, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 0.75rem;
}

.context-title[b-bfcd8sc6r9] {
  margin: 0;
  font-size: var(--font-size-xl, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text, #1A202C);
}

.context-subtitle[b-bfcd8sc6r9] {
  margin: 0.5rem 0 0;
  font-size: var(--font-size-sm, 0.95rem);
  color: var(--color-text-muted, rgba(26, 32, 44, 0.6));
}

/* Form */
.context-form[b-bfcd8sc6r9] {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}

.context-form > .form-section[b-bfcd8sc6r9],
.context-form > .form-divider[b-bfcd8sc6r9] {
  width: 100%;
}

.form-section[b-bfcd8sc6r9] {
  margin-bottom: 1rem;
}

.form-divider[b-bfcd8sc6r9] {
  height: 1px;
  background-color: var(--color-border-light, #EDF2F7);
  margin: 1.5rem 0;
}

.form-group[b-bfcd8sc6r9] {
  margin-bottom: 1.25rem;
}

.form-group:last-child[b-bfcd8sc6r9] {
  margin-bottom: 0;
}

/* Labels */
.form-label[b-bfcd8sc6r9] {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--font-size-sm, 0.95rem);
  font-weight: 500;
  color: var(--color-text, #1A202C);
}

.required-indicator[b-bfcd8sc6r9] {
  color: #E53E3E;
  margin-left: 2px;
}

.optional-indicator[b-bfcd8sc6r9] {
  color: var(--color-text-muted, rgba(26, 32, 44, 0.6));
  font-weight: 400;
  font-size: var(--font-size-sm, 0.85rem);
  margin-left: 4px;
}

/* Select inputs - Air & Glass styling */
.form-select[b-bfcd8sc6r9] {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-md, 12px);
  font-size: var(--font-size-base, 1rem);
  font-family: var(--font-family, inherit);
  color: var(--color-text, #1A202C);
  background-color: var(--color-surface, #FFFFFF);
  cursor: pointer;
  transition: border-color var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease), background-color var(--transition-fast, 0.15s ease);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231A202C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.form-select:focus[b-bfcd8sc6r9] {
  outline: none;
  border-color: var(--color-primary, #5747f8);
  background-color: var(--color-surface-hover, #F7FAFC);
  box-shadow: 0 0 0 4px var(--color-focus, rgba(87, 71, 248, 0.15));
}

.form-select:disabled[b-bfcd8sc6r9] {
  background-color: var(--color-surface-hover, #F7FAFC);
  border-color: var(--color-border-light, #EDF2F7);
  color: var(--color-text-muted, rgba(26, 32, 44, 0.6));
  cursor: not-allowed;
  opacity: 0.7;
}

/* Help text */
.form-help[b-bfcd8sc6r9] {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-muted, rgba(26, 32, 44, 0.6));
}

/* Error banner */
.error-banner[b-bfcd8sc6r9] {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  margin: 0 2rem;
  margin-top: 1rem;
  background-color: #FFF5F5;
  border: 1px solid #FEB2B2;
  border-radius: var(--radius-md, 12px);
  color: #C53030;
  font-size: var(--font-size-sm, 0.95rem);
}

.error-icon[b-bfcd8sc6r9] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #C53030;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Spinner */
.spinner[b-bfcd8sc6r9] {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-b-bfcd8sc6r9 0.6s linear infinite;
  margin-right: 0.5rem;
  vertical-align: middle;
}

@keyframes spin-b-bfcd8sc6r9 {
  to {
    transform: rotate(360deg);
  }
}

/* Button - uses global .btn-primary styles, add full width */
.btn-primary[b-bfcd8sc6r9] {
  width: 100%;
  margin-top: 1.5rem;
}

/* Partner configuration display */
.config-state-message[b-bfcd8sc6r9] {
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-muted, rgba(26, 32, 44, 0.6));
  padding: 0.5rem 0;
}

.config-list[b-bfcd8sc6r9] {
  margin: 0;
  padding: 0.75rem 1rem;
  background-color: var(--color-surface-hover, #F7FAFC);
  border: 1px solid var(--color-border-light, #EDF2F7);
  border-radius: var(--radius-md, 12px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.config-entry[b-bfcd8sc6r9] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.5rem;
  align-items: baseline;
}

.config-key[b-bfcd8sc6r9] {
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 600;
  color: var(--color-text, #1A202C);
  font-family: monospace;
}

.config-value[b-bfcd8sc6r9] {
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-muted, rgba(26, 32, 44, 0.6));
  margin: 0;
  font-family: monospace;
  word-break: break-all;
}
/* /Components/Pages/InvalidLink.razor.rz.scp.css */
.invalid-link-container[b-1v1xht0k3k] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  text-align: center;
  padding: 2rem;
  animation: fadeInSlideUp 0.3s ease-out;
}

.invalid-link-icon[b-1v1xht0k3k] {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--color-text-muted, rgba(26, 32, 44, 0.7));
}

.invalid-link-title[b-1v1xht0k3k] {
  margin: 0 0 0.75rem;
  font-size: var(--font-size-xl, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text, #1A202C);
}

.invalid-link-message[b-1v1xht0k3k] {
  margin: 0;
  max-width: 480px;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, rgba(26, 32, 44, 0.7));
}
/* /Components/Pages/TermsOfServicePage.razor.rz.scp.css */
[b-31ouu18pii] #hs_cos_wrapper_widget_77962277778 {
  padding: 0 !important;
}

.terms-page.error[b-31ouu18pii] {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--theme-font-display, var(--font-family));
  gap: var(--spacing-xl);
  color: var(--color-primary);
}

.terms-page.error>h3[b-31ouu18pii] {
  color: var(--color-text);
}
/* /Components/Steps/AddressInputComponent.razor.rz.scp.css */
.address-search-error[b-2tu6xkmfur] {
  color: var(--color-danger, #d32f2f);
  font-size: 0.75rem;
}
/* /Components/Steps/ConsumerIntentInputComponent.razor.rz.scp.css */
.option-button[b-6a463q9srj] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-disabled);
  gap: var(--spacing-sm);
}

.intent-option-label[b-6a463q9srj] {
  transition: color var(--transition-base);
}

.option-button .intent-option-label[b-6a463q9srj] {
  color: var(--color-text);
}

.option-button.selected[b-6a463q9srj] {
  color: var(--color-accent);
}

.option-button.selected .intent-option-label[b-6a463q9srj] {
  color: var(--color-accent);
}
/* /Components/Steps/ContactInformationComponent.razor.rz.scp.css */
.contact-consent-text[b-tkuc9odqpf] {
  font-family: var(--theme-font-ui, var(--font-family));
  font-size: var(--font-size-xs);
  width: 100%;
  margin-top: var(--spacing-lg);
  color: var(--color-text-muted);
}

[b-tkuc9odqpf].contact-consent-text>a {
  text-decoration: underline;
  color: var(--color-primary-text);
}
/* /Components/Steps/CurrentInsurancePremiumDetailsComponent.razor.rz.scp.css */
.premium-row[b-d6zxwv6mia] {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  width: 100%;
}

.premium-row .input-field[b-d6zxwv6mia] {
  flex: 1;
  max-width: none;
}

.premium-input-wrapper[b-d6zxwv6mia] {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}

.currency-symbol[b-d6zxwv6mia] {
  left: 0.75rem;
  pointer-events: none;
  color: inherit;
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-input-wrapper input.input-field[b-d6zxwv6mia] {
  flex: 1;
  padding-left: 28px;
}
/* /Components/Steps/DcoQuotesPresentationComponent.razor.rz.scp.css */
/* ============================================
   Button Loading State
   ============================================ */
.btn-loading[b-dn00sxj90y] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  cursor: progress;
}

/* Primary color spinner for gradient button background */
.btn-spinner[b-dn00sxj90y] {
  border-color: var(--color-border-light);
  border-top-color: var(--color-border);
  border-width: 3px;
  margin: 0;
}

/* ============================================
   Accessibility: Reduced Motion Override
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  .dco-checkbox-row[b-dn00sxj90y],
  .dco-checkbox[b-dn00sxj90y] {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }

  .dco-checkbox-row:active[b-dn00sxj90y] {
    transform: none;
  }
}

/* ============================================
   Disclosure Text
   ============================================ */
.dco-disclosure-container[b-dn00sxj90y] {
  width: 100%;
  max-width: 600px;
}

.dco-disclosure-container *[b-dn00sxj90y] {
  font-size: var(--font-size-sm);
  vertical-align: bottom;
}

.dco-disclosure-toggle[b-dn00sxj90y] {
  font-weight: 600;
  margin-left: var(--spacing-xs);
  text-wrap-mode: nowrap;
  cursor: pointer;
  color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .dco-disclosure-toggle:hover[b-dn00sxj90y] {
    color: var(--color-text);
  }
}

/* ============================================
   Disclosure Checkbox
   ============================================ */
.dco-checkbox-row[b-dn00sxj90y] {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .dco-checkbox-row:hover[b-dn00sxj90y] {
    background-color: var(--color-focus, rgba(87, 71, 248, 0.08));
  }

  .dco-checkbox-row:hover .dco-checkbox[b-dn00sxj90y] {
    border-color: var(--theme-input-border-hover, var(--color-accent));
  }
}

.dco-checkbox-row:active[b-dn00sxj90y] {
  background-color: var(--color-selected-tint);
  transform: scale(0.995);
}

.dco-checkbox-row:focus-visible[b-dn00sxj90y] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background-color: var(--color-focus, rgba(87, 71, 248, 0.08));
}

.dco-checkbox[b-dn00sxj90y] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid var(--theme-input-border, var(--color-border));
  border-radius: 5px;
  background-color: var(--color-surface);
  transition: border-color var(--transition-base),
    background-color var(--transition-base),
    transform var(--transition-fast);
  position: relative;
}

.dco-checkbox.checked[b-dn00sxj90y] {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.dco-checkbox.checked[b-dn00sxj90y]::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: 2px solid var(--color-text-inverse);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.dco-checkbox-label[b-dn00sxj90y] {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}

/* ============================================
   Disclosure Links
   ============================================ */
.dco-disclosure-links *[b-dn00sxj90y] {
  text-decoration: none;
  font-weight: 500;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
  .dco-disclosure-links a:hover[b-dn00sxj90y] {
    text-decoration: underline;
  }
}
/* /Components/Steps/DynamicDcoStepRenderer.razor.rz.scp.css */
/* ============================================
   Carrier Switcher (segmented control)
   Appears only after all carriers load successfully.
   ============================================ */
.dco-carrier-switcher[b-2m8tkpqm6f] {
  display: flex;
  align-self: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
  margin-bottom: var(--spacing-lg);
}

.dco-carrier-option[b-2m8tkpqm6f] {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-xl);
  border: none;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .dco-carrier-option:hover:not(.dco-carrier-option--active)[b-2m8tkpqm6f] {
    background-color: var(--theme-primary-focus, rgba(87, 71, 248, 0.08));
    color: var(--color-primary-text);
  }
}

.dco-carrier-option--active[b-2m8tkpqm6f] {
  background-color: var(--color-primary-fill);
  color: var(--color-on-primary-fill);
  box-shadow: var(--shadow-sm);
}

/* ============================================
   Sorry Screen
   ============================================ */
.dco-sorry-screen[b-2m8tkpqm6f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
}

.dco-sorry-message[b-2m8tkpqm6f] {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  max-width: 480px;
  line-height: 1.6;
  margin: 0;
}
/* /Components/Steps/InfoSummaryComponent.razor.rz.scp.css */
/* ============================================
   InfoSummaryComponent — card-based layout
   ============================================ */

.summary-sections[b-ajddti7ih9] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin: 0 auto;
  margin-top: var(--spacing-2xl);
}

.summary-btn[b-ajddti7ih9] {
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background-color: transparent;
  border: none;
  transition: transform var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .summary-btn:not(:disabled):hover[b-ajddti7ih9] {
    transform: scale(1.05);
    cursor: pointer;
    background-color: var(--theme-primary-focus);
  }
}

.summary-btn:not(:disabled):focus-visible[b-ajddti7ih9] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   Summary cards (Drivers, Vehicles, Additional Details)
   ============================================ */

.summary-card[b-ajddti7ih9] {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  animation: fadeInSlideUp-b-ajddti7ih9 0.2s ease-out;
}

.summary-card-details[b-ajddti7ih9] {
  padding: 24px;
  gap: 8px;
  align-items: flex-start;
}

.summary-card-title[b-ajddti7ih9] {
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 22px;
  color: var(--color-text-muted);
  width: 100%;
  text-align: left;
  margin: 0;
  text-transform: uppercase;
  font-family: var(--theme-font-ui, var(--font-family));
}

/* ============================================
   Collapsible card header (Drivers, Vehicles, Additional Details, Coverage Level)
   color here only affects the chevron via currentColor -- title/summary-value set their own colors.
   ============================================ */

.summary-card-header[b-ajddti7ih9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--spacing-md);
  cursor: pointer;
  color: var(--color-primary);
}

.summary-card-header-text[b-ajddti7ih9] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.summary-card-summary-value[b-ajddti7ih9] {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text);
  font-family: var(--theme-font-display, var(--font-family));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: height var(--transition-base), opacity var(--transition-base);
}

.summary-card-summary-value.hidden[b-ajddti7ih9] {
  /* Prevents the hidden summary from collapsing the header's height */
  line-height: var(--bs-body-line-height);
  opacity: 0;
}

.summary-card-expanded-body[b-ajddti7ih9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.summary-card-edit-row[b-ajddti7ih9] {
  flex: 0 0 fit-content;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
}

.summary-card-details-body[b-ajddti7ih9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

/* ============================================
   Item cards (driver / vehicle bordered boxes)
   ============================================ */

.summary-card-items[b-ajddti7ih9] {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100%);
  gap: var(--spacing-md);
  width: 100%;
}

.item-card[b-ajddti7ih9] {
  min-width: 0;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background-color: transparent;
  transition: background-color var(--transition-base), transform 250ms;
}

.item-icon-container[b-ajddti7ih9] {
  padding: var(--spacing-md);
  background-color: var(--theme-primary-focus);
  border-radius: 50%;
  color: var(--color-primary);
}

.item-card-body[b-ajddti7ih9] {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) 0;
}

.item-card-header[b-ajddti7ih9] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.item-card-name[b-ajddti7ih9] {
  font-size: 21px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--theme-font-display, var(--font-family));
}

.item-card-details[b-ajddti7ih9] {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.5px;
  color: #333;
}

.item-card-actions[b-ajddti7ih9] {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ============================================
   Vehicle card specifics
   ============================================ */

.item-card-vehicle-name[b-ajddti7ih9] {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 18px;
  color: var(--color-text);
  font-family: var(--theme-font-display, var(--font-family));
}

.item-card-vehicle-vin[b-ajddti7ih9] {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.5px;
  color: var(--color-text-muted);
  font-family: var(--theme-font-ui, var(--font-family));
}

/* ============================================
   Edit icon links
   ============================================ */

.edit-icon-link[b-ajddti7ih9] {
  color: var(--color-primary);
}

/* ============================================
   Remove icon button (ghost, danger on hover)
   ============================================ */

.remove-icon-btn[b-ajddti7ih9] {
  color: var(--color-danger);
}

.remove-icon-btn:disabled[b-ajddti7ih9] {
  color: var(--color-text--muted);
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============================================
   Additional Details — sub-headers & values
   ============================================ */

.addtl-details-expanded-body[b-ajddti7ih9] {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--spacing-md);
  width: 100%;
}

.detail-group-label[b-ajddti7ih9] {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-text);
  width: 100%;
  margin: 0;
}

.detail-value[b-ajddti7ih9] {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.5px;
  color: rgba(0, 0, 0, 0.87);
  width: 100%;
  margin: 0;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInSlideUp-b-ajddti7ih9 {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-card[b-ajddti7ih9] {
    animation: none;
  }
}

/* ============================================
   Responsive — stack item cards on narrow screens
   ============================================ */

@media (max-width: 480px) {
  .summary-card-items[b-ajddti7ih9] {
    flex-direction: column;
  }

  .add-button[b-ajddti7ih9] {
    max-width: 100%;
  }

  .item-card-name[b-ajddti7ih9] {
    font-size: 18px;
    line-height: 22px;
  }
}

/* ============================================
   Coverage Level card
   Left-aligned (unlike the centered default .summary-card) since every child spans full width.
   ============================================ */

.coverage-level-card[b-ajddti7ih9] {
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.coverage-tier-header[b-ajddti7ih9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.coverage-tier-name[b-ajddti7ih9] {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary-text);
  font-family: var(--theme-font-display, var(--font-family));
}

.coverage-tier-badge[b-ajddti7ih9] {
  /* --theme-gradient (not the nonexistent --theme-secondary) -- matches .btn-primary's
     contrast-checked gradient/text-color pairing. */
  background: var(--theme-gradient, linear-gradient(91deg, var(--color-gradient-start), var(--color-gradient-end)));
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* align-self right-aligns just this badge without right-aligning the whole (column) .summary-sections. */
.changes-saved-badge[b-ajddti7ih9] {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: var(--spacing-xs);
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ============================================
   Coverage slider
   Native range input for drag/touch/keyboard support; track fill + icons are driven by
   --coverage-slider-value/--coverage-slider-max, bound from Blazor in the markup.
   ============================================ */

/* Registers --coverage-slider-value as an animatable number so the transition below glides
   the fill instead of snapping between discrete tier values. */
@property --coverage-slider-value {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.coverage-slider-container[b-ajddti7ih9] {
  /* Shared thumb/icon-size and inset, referenced below so the input and icon row stay pinned to
     the same track line instead of drifting apart. */
  --coverage-slider-thumb-size: 20px;
  --coverage-slider-icon-inset: 10px;
  position: relative;
  width: 100%;
  height: var(--coverage-slider-thumb-size);
  margin: var(--spacing-lg) 0;
  /* Eases the discrete per-tier jump in --coverage-slider-value into a glide. */
  transition: --coverage-slider-value 250ms ease;
}

/* Single-tier state: just a centered icon, no track/thumb/icon-row. */
.coverage-slider-container--single[b-ajddti7ih9] {
  height: auto;
  display: flex;
  justify-content: center;
}

.coverage-slider-input[b-ajddti7ih9] {
  /* Buried below .coverage-slider-icons (z-index 2); pointer-events:none on that row still lets
     clicks/drags/keys reach this input despite its own thumb being invisible. Shares the icon
     row's left/right inset so the track can't poke out past the first/last icon. */
  position: absolute;
  top: 50%;
  left: var(--coverage-slider-icon-inset);
  right: var(--coverage-slider-icon-inset);
  transform: translateY(-50%);
  z-index: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--radius-sm);
  /* --color-gradient-start/end (not --theme-gradient) -- theme-gradient is a plain color for some
     themes and a gradient function for others, so it can't be nested as a stop here. */
  background: linear-gradient(to right,
      var(--color-gradient-start) 0%,
      /* max(1, ...) guards against divide-by-zero when only one tier is present. */
      var(--color-gradient-end) calc(var(--coverage-slider-value) / max(1, var(--coverage-slider-max)) * 100%),
      var(--color-border) calc(var(--coverage-slider-value) / max(1, var(--coverage-slider-max)) * 100%),
      var(--color-border) 100%);
  cursor: pointer;
  margin: 0;
}

/* Thumb stays interactive but invisible -- the icon row's selected dot is the visible "point". */
.coverage-slider-input[b-ajddti7ih9]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--coverage-slider-thumb-size);
  height: var(--coverage-slider-thumb-size);
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.coverage-slider-input[b-ajddti7ih9]::-moz-range-thumb {
  width: var(--coverage-slider-thumb-size);
  height: var(--coverage-slider-thumb-size);
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.coverage-slider-input[b-ajddti7ih9]::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-sm);
  background: transparent;
}

.coverage-slider-input:focus-visible[b-ajddti7ih9] {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Decorative only -- pointer-events:none passes all interaction through to the range input beneath. */
.coverage-slider-icons[b-ajddti7ih9] {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--coverage-slider-icon-inset);
  right: var(--coverage-slider-icon-inset);
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.coverage-slider-icon[b-ajddti7ih9] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  padding: var(--spacing-sm);
  /* background isn't transitioned -- it flips between a flat color and a gradient function,
     which browsers can't interpolate. */
  transition: transform var(--transition-base),
    color var(--transition-base),
    background var(--transition-base);
}

.coverage-slider-icon--selected[b-ajddti7ih9] {
  background: var(--theme-gradient, linear-gradient(91deg, var(--color-gradient-start), var(--color-gradient-end)));
  color: var(--color-text-inverse);
  transform: scale(1.2);
}

/* ============================================
   Coverage detail grid
   ============================================ */

.coverage-detail-grid[b-ajddti7ih9] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  width: 100%;
}

.coverage-detail-grid--expanded[b-ajddti7ih9] {
  margin-bottom: var(--spacing-md);
}

/* Plain max-height transition, not the shared ExpandableContainer grid-template-rows technique --
   this nests inside the Coverage Level card's own ExpandableContainer, and two nested 0fr/1fr grid
   tracks don't collapse correctly in real browsers. Duration matches ExpandableContainer's so both
   feel the same; 600px just needs to exceed the grid's real rendered height. */
.coverage-expanded-details[b-ajddti7ih9] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.coverage-expanded-details.expanded[b-ajddti7ih9] {
  max-height: 600px;
}

@media (prefers-reduced-motion: reduce) {
  .coverage-expanded-details[b-ajddti7ih9] {
    transition: none;
  }
}

.coverage-detail-item[b-ajddti7ih9] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.coverage-detail-label[b-ajddti7ih9] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--theme-font-ui, var(--font-family));
}

.coverage-detail-value[b-ajddti7ih9] {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-family: var(--theme-font-ui, var(--font-family));
}

.coverage-detail-value strong[b-ajddti7ih9] {
  font-weight: 700;
}

.coverage-detail-value span[b-ajddti7ih9] {
  color: var(--color-text-muted);
  margin-left: var(--spacing-xs);
}

.coverage-detail-note[b-ajddti7ih9] {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.coverage-expand-toggle[b-ajddti7ih9] {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: var(--spacing-xs);
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: var(--theme-font-ui, var(--font-family));
}

@media (hover: hover) and (pointer: fine) {
  .coverage-expand-toggle:hover[b-ajddti7ih9] {
    color: var(--color-primary-hover);
  }
}

.coverage-expand-toggle:focus-visible[b-ajddti7ih9] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.coverage-disclaimer[b-ajddti7ih9] {
  align-self: center;
  margin: 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ============================================
   Coverage Level skeleton (shown while GetCoverageOptionsAsync is in flight)
   .skeleton-block itself lives in components.css/animations.css; these are just this card's sizes.
   ============================================ */

.coverage-skeleton[b-ajddti7ih9] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  width: 100%;
}

.coverage-skeleton-tier-name[b-ajddti7ih9] {
  width: 40%;
  height: 24px;
}

.coverage-skeleton-slider[b-ajddti7ih9] {
  width: 100%;
  height: 20px;
}

.coverage-skeleton-detail[b-ajddti7ih9] {
  height: 40px;
}

@media (max-width: 480px) {
  .coverage-detail-grid[b-ajddti7ih9] {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Shared Dropdown Styles
   Used by driver edit dropdown and additional details dropdown
   ============================================ */

.dropdown-container[b-ajddti7ih9] {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-backdrop[b-ajddti7ih9] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: transparent;
  cursor: default;
}

.edit-icon-btn[b-ajddti7ih9] {
  color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
  .edit-icon-btn:hover[b-ajddti7ih9] {
    color: var(--color-primary-hover);
  }
}

.edit-icon-btn:focus-visible[b-ajddti7ih9] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dropdown-menu[b-ajddti7ih9] {
  position: absolute;
  top: calc(100% + var(--spacing-xs, 4px));
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 12.5rem;
  min-height: 100px;
  z-index: 99999;
  overflow: visible;
}

/* Dropdown header - sticky at top with title */
.dropdown-menu-header[b-ajddti7ih9] {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-lg);
  z-index: 1;
}

.dropdown-menu-title[b-ajddti7ih9] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0;
  font-family: var(--theme-font-ui, var(--font-family));
}

/* Scrollable dropdown items container */
.dropdown-menu-items[b-ajddti7ih9] {
  max-height: min(300px, 40dvh);
  overflow-y: auto;
  overflow-x: hidden;
}

.dropdown-item[b-ajddti7ih9] {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-family: var(--theme-font-ui, var(--font-family));
  line-height: 1.5;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light);
}

.dropdown-item:last-child[b-ajddti7ih9] {
  border-bottom: none;
}

@media (hover: hover) and (pointer: fine) {
  .dropdown-item:hover[b-ajddti7ih9] {
    background: var(--theme-primary-focus);
    color: var(--color-primary);
  }
}

.dropdown-item:focus-visible[b-ajddti7ih9] {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--theme-primary-focus);
  color: var(--color-primary);
}

/* ============================================
   Item Deletion Confirmation (slide-out)
   ============================================ */

/* Wrapper enables positioning context for confirmation layer */
.item-card-wrapper[b-ajddti7ih9] {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* Allow dropdown to overflow when open */
.item-card-wrapper[data-dropdown-open="true"][b-ajddti7ih9] {
  overflow: visible;
}

/* Also ensure the card itself doesn't clip when dropdown is open */
.item-card-wrapper[data-dropdown-open="true"] .item-card[b-ajddti7ih9] {
  overflow: visible;
}

.item-card-wrapper[data-dropdown-open="true"] .item-delete-confirmation[b-ajddti7ih9] {
  display: none;
}

/* Confirmation layer sits behind the card */
.item-delete-confirmation[b-ajddti7ih9] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  background-color: var(--color-surface);
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 250ms;
  padding: var(--spacing-md);
}

/* When card slides out, reveal confirmation layer */
.item-card-wrapper:has(.item-card.item-card-slide-out) .item-delete-confirmation[b-ajddti7ih9] {
  transform: translateX(0);
  pointer-events: auto;
}

/* Card slides left when deletion is triggered */
.item-card.item-card-slide-out[b-ajddti7ih9] {
  transform: translateX(-100%);
}

.delete-confirmation-text[b-ajddti7ih9] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  font-family: var(--theme-font-display, var(--font-family));
  margin: 0;
}

.confirm-delete-btn[b-ajddti7ih9] {
  color: var(--color-primary);
}

/* Neutral button for canceling deletion - WCAG touch target 44x44px */
.cancel-delete-btn[b-ajddti7ih9] {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .cancel-delete-btn:hover[b-ajddti7ih9] {
    background-color: var(--color-surface-hover, var(--theme-primary-focus));
    border-color: var(--color-border-hover, var(--color-primary));
  }
}

.cancel-delete-btn:focus-visible[b-ajddti7ih9] {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .item-card.item-card-slide-out[b-ajddti7ih9] {
    transition-duration: 0.01ms;
  }

  .item-delete-confirmation[b-ajddti7ih9] {
    transition-duration: 0.01ms;
  }
}
/* /Components/Steps/QuotesPresentationComponent.razor.rz.scp.css */
/* ============================================
   QuotesPresentationComponent — vertical card list
   with selectable/expandable cards
   ============================================ */

/* ============================================
   Edit Banner — sticky, full-width call-to-action to return to Summary
   Breaks out of .content-container's centered max-width column to span
   the full viewport (like the site header above it), using the standard
   "50% - 50vw" technique: this component's root sits at the same
   symmetric, centered offset as .content-container, so the calc cancels
   that offset out exactly regardless of viewport width.
   Sticks directly below the (also sticky) site header via
   --site-header-height, so both stay pinned together while the quote
   list scrolls underneath.
   ============================================ */
.quotes-edit-banner[b-bi93yzk5ve] {
  position: sticky;
  top: var(--site-header-height);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Cancels the top padding of .content-container and .step-page (ancestors this component
     doesn't control), so the banner's natural, unstuck position is already flush with the site
     header — otherwise a gap shows above it until the page is scrolled far enough to engage
     the sticky offset above. References --step-page-top-padding (layout.css) rather than
     duplicating .step-page's clamp() by hand, so the two can never drift apart. */
  margin-top: calc(-1 * (var(--spacing-xl) + var(--step-page-top-padding)));
  /* Opaque base + translucent tint layered on top of it (not the page behind it) — otherwise the
     aurora background blur bleeds through and the fill reads as a patchy cloud instead of a flat
     brand-lavender surface. */
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--theme-primary-focus, var(--color-focus)), var(--theme-primary-focus, var(--color-focus)));
  opacity: 1;
  transition: opacity var(--transition-base), height var(--transition-base);
}

.quotes-edit-banner-container[b-bi93yzk5ve] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  width: 100%;
  max-width: var(--max-content-width);
  padding: var(--spacing-md) var(--spacing-xl);
}

.quotes-edit-banner-text[b-bi93yzk5ve] {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: var(--theme-font-display, var(--font-family));
}

.quotes-edit-btn[b-bi93yzk5ve] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  background-color: var(--color-surface);
  color: var(--color-primary-text);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--theme-font-ui, var(--font-family));
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

@media (hover: hover) and (pointer: fine) {
  .quotes-edit-btn:hover[b-bi93yzk5ve] {
    transform: scale(1.02);
    box-shadow: var(--shadow-button-hover);
    cursor: pointer;
  }
}

.quotes-edit-btn:active[b-bi93yzk5ve] {
  background-color: var(--theme-primary-focus, var(--color-focus));
}

/* Mobile: icon-only — the "Edit" label drops and the icon grows to stay tappable */
@media (max-width: 768px) {
  .quotes-edit-banner-text[b-bi93yzk5ve] {
    font-size: var(--font-size-xs);
  }

  .quotes-edit-btn[b-bi93yzk5ve] {
    padding: var(--spacing-md);
    gap: 0;
  }

  .quotes-edit-btn span[b-bi93yzk5ve] {
    display: none;
  }

  .quotes-edit-btn[b-bi93yzk5ve]  .material-icon {
    transform: scale(1.5);
  }
}

/* ============================================
   Mobile: scroll-linked collapse
   Once `.quotes-results-header` (below) scrolls behind the sticky header+banner,
   QuotesPresentationComponent.razor.js toggles `quotes-banner-collapsed` on <body> — the header's
   compact "Edit info" button (NavBar / layout.css) takes over the same action and this banner
   fades out and stops taking up space, leaving the site header as the only sticky element.
   Scrolling back up past the same point reverses it. Desktop is untouched: the banner always
   stays sticky and full height there, exactly as already approved.

   `grid-template-rows: 1fr -> 0fr` reclaims the banner's height (same accordion technique as
   `.quote-card-actions-container` below); `visibility` (in addition to `opacity`) keeps the
   collapsed banner's Edit button out of the tab order and the accessibility tree instead of
   leaving an invisible-but-focusable control sitting in the zero-height, clipped banner.
   Per the CSS Transitions spec, a `visibility` transition to "visible" applies at the start of
   the transition and to "hidden" only at the end — so the button becomes focusable exactly when
   the fade-in begins, and stops being focusable only once the fade-out has fully finished.
   ============================================ */
@media (max-width: 768px) {
  body.quotes-banner-collapsed .quotes-edit-banner[b-bi93yzk5ve] {
    height: 0px;
    opacity: 0;
  }

  body.quotes-banner-collapsed .quotes-edit-banner-container[b-bi93yzk5ve] {
    opacity: 0;
    visibility: hidden;
  }
}

/* ============================================
   Outer Container
   ============================================ */
.quotes-container[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  animation: fadeInSlideUp-b-bi93yzk5ve 0.3s ease-out;
}

@keyframes fadeInSlideUp-b-bi93yzk5ve {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Loading State
   ============================================ */
.quotes-loading-container[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
  min-height: 260px;
}

@media (min-width: 768px) {
  .quotes-loading-container[b-bi93yzk5ve] {
    gap: var(--spacing-xl);
    padding: var(--spacing-3xl) var(--spacing-xl);
    min-height: 300px;
  }
}

.quotes-loading-icon[b-bi93yzk5ve] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   Empty & Error States
   ============================================ */
.quotes-empty-state[b-bi93yzk5ve],
.quotes-error-state[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl) var(--spacing-lg);
  text-align: center;
  min-height: 260px;
}

@media (min-width: 768px) {

  .quotes-empty-state[b-bi93yzk5ve],
  .quotes-error-state[b-bi93yzk5ve] {
    gap: var(--spacing-xl);
    padding: var(--spacing-3xl) var(--spacing-xl);
    min-height: 300px;
  }
}

.quotes-empty-icon[b-bi93yzk5ve] {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.quotes-empty-actions[b-bi93yzk5ve] {
  margin-top: var(--spacing-lg);
}

/* ============================================
   Results State
   ============================================ */
.quotes-results-container[b-bi93yzk5ve] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
}

.quotes-results-header[b-bi93yzk5ve] {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-xl) 0;
}

/* ============================================
   Quote Sections — DCO and Agency
   ============================================ */
.dco-quotes-section[b-bi93yzk5ve],
.agency-quotes-section[b-bi93yzk5ve] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Add spacing between sections when both are present */
.dco-quotes-section+.agency-quotes-section[b-bi93yzk5ve] {
  margin-top: var(--spacing-2xl);
}

.quotes-section-header[b-bi93yzk5ve] {
  font-size: var(--font-size-base);
  font-weight: 500;
  font-family: var(--theme-font-ui, var(--font-family));
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  padding-bottom: var(--spacing-sm);
}

/* ============================================
   Agency Section — Nothing To Show
   ============================================ */
.agency-quotes-unavailable[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.agency-quotes-unavailable-message[b-bi93yzk5ve] {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--theme-font-ui, var(--font-family));
}

.agency-quotes-retry[b-bi93yzk5ve] {
  width: auto;
  align-self: center;
}

/* ============================================
   Quote List — Vertical Stack
   ============================================ */
.quotes-list[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  width: 100%;
}

/* ============================================
   Quote Card — Selectable
   ============================================ */
.quote-card[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  animation: cardFadeIn-b-bi93yzk5ve 0.4s ease-out backwards;
}

@media (hover: hover) and (pointer: fine) {
  .quote-card:hover[b-bi93yzk5ve] {
    box-shadow: var(--shadow-card-hover);
  }
}

.quote-card--selected[b-bi93yzk5ve] {
  border-color: transparent;
}

@keyframes cardFadeIn-b-bi93yzk5ve {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Quote Card Content — Logo left, Price right
   ============================================ */
.quote-card-content[b-bi93yzk5ve] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: var(--spacing-sm);
}

.quote-card-logo[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

.quote-carrier-logo[b-bi93yzk5ve] {
  width: 114px;
  height: 48px;
  object-fit: contain;
}

.quote-carrier-name[b-bi93yzk5ve] {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
}

/* ============================================
   Quote Card Pricing
   ============================================ */
.quote-card-pricing[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-sm);
}

.quote-price-primary[b-bi93yzk5ve] {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.quote-price-amount[b-bi93yzk5ve] {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 29px;
  letter-spacing: -0.5px;
}

.quote-price-period[b-bi93yzk5ve] {
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 16px;
}

/* ============================================
   Savings Badge
   ============================================ */
.quote-savings-badge[b-bi93yzk5ve] {
  background-color: #f3f8fe;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 13px;
  letter-spacing: 0.14px;
  padding: 4px var(--spacing-sm);
  border-radius: var(--radius-sm);
  text-align: right;
  white-space: nowrap;
}

/* ============================================
   Quote Card Actions — Shown when selected
   ============================================ */
.quote-card-actions-container[b-bi93yzk5ve] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
  overflow: hidden;
  width: 100%;
}

.quote-card-actions-container.expanded[b-bi93yzk5ve] {
  grid-template-rows: 1fr;
}

.quote-card-actions-sizer[b-bi93yzk5ve] {
  min-height: 0;
}

.quote-card-actions[b-bi93yzk5ve] {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  width: 100%;
}

.quote-action-btn[b-bi93yzk5ve] {
  flex: 1;
  margin-top: 0;
}

/* ============================================
   DCO Quote Card — Simplified styling
   ============================================ */

.dco-view-details-btn[b-bi93yzk5ve] {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-primary-text);
  border-radius: 4px;
  color: var(--color-primary-text);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.46px;
  text-transform: uppercase;
  padding: 6px 16px;
  line-height: 22px;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  min-height: 36px;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .dco-view-details-btn:hover[b-bi93yzk5ve] {
    background-color: rgba(87, 71, 248, 0.04);
    border-color: var(--color-primary);
  }
}

.dco-view-details-btn:active[b-bi93yzk5ve] {
  background-color: rgba(87, 71, 248, 0.08);
}

.quotes-agent-cta[b-bi93yzk5ve] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) 0 0 0;
  border-top: 1px solid var(--color-border);
  width: 100%;
  text-align: center;
}

/* ============================================
   Mobile: reduce top whitespace
   ============================================ */
@media (max-width: 768px) {
  .quotes-container[b-bi93yzk5ve] {
    padding-top: var(--spacing-xs);
  }
}

/* ============================================
   Accessibility: Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  .quotes-container[b-bi93yzk5ve],
  .quote-card[b-bi93yzk5ve] {
    animation: none;
  }
}