/* ============================================================================
   PRIME HARBOR INSURANCE — AUTO QUOTE FORM CSS
   ============================================================================
   Page:        /auto-insurance-quote/
   Served from: prime-harbor-assets Worker — /auto-quote/styles.css
   Family:      P&C (Auto, Renters, Bundle) — wrapper .phi-quote-wrap
   Version:     v3.3 (Worker-served rebuild; v3 + v3.1 + v3.2 integrated at root)
   Foundation:  phi-product-page-foundation — canonical site-wide tokens
   ----------------------------------------------------------------------------
   ARCHITECTURE
   - This is P&C-family CSS. The P&C family is intentionally visually distinct
     from the Life family (Final Expense posture). The two families do not
     share form CSS and are not to be unified.
   - Universal tokens (navy, gold, spacing, radii, etc.) are consumed from the
     canonical foundation snippet. They are NOT redefined here.
   - Three P&C-family-specific layout tokens are retained locally in Section 01
     because they are form-family dimensions, not site-wide values. They are
     flagged as candidates for the future P&C family base stylesheet.
   - Section banners mark each section as P&C-FAMILY-SHARED (candidate for the
     future P&C base extraction at Renters build time) or AUTO-FORM-SPECIFIC.
   - Every rule is anchored to .phi-quote-wrap for a uniform specificity
     baseline. !important appears only in the three documented-justified cases.
   ============================================================================ */

/* ============================================================================
   SECTION 01 — P&C-FAMILY-SPECIFIC LOCAL TOKENS
   ============================================================================
   Scope: AUTO-FORM-SPECIFIC (move to P&C family base at Renters build time)

   The full v3 brand-token :root block has been REMOVED. Auto consumes the
   canonical foundation tokens from phi-product-page-foundation. Only these
   three P&C-family-specific layout dimensions are retained locally, because
   they are form-family values that do not belong in the site-wide foundation
   (the Life family uses different values for the equivalent dimensions).

   FUTURE: when the P&C family base stylesheet is extracted (Renters build),
   these three tokens move into it and this section is removed.
   ============================================================================ */
.phi-quote-wrap {
  --phi-form-max-width: 800px;
  --phi-input-padding-x: var(--phi-space-3);
  --phi-button-padding-x: var(--phi-space-6);
  --phi-step-padding-mobile: var(--phi-space-12) var(--phi-space-5) var(--phi-space-8);
  --phi-step-padding-tablet: var(--phi-space-12) var(--phi-space-8) var(--phi-space-10);
  --phi-step-padding-desktop: var(--phi-space-16) var(--phi-space-12) var(--phi-space-12);
}

/* ============================================================================
   SECTION 02 — DEFENSIVE RESET LAYER
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   Neutralizes user agent styles, Elementor injection, and theme styles that
   interfere with form rendering. Each rule is paired with inline documentation
   explaining the behavior being neutralized.
   ============================================================================ */

/* Universal box-sizing inside the form. Browsers and Elementor both apply
   box-sizing variations. Locking to border-box matches modern conventions
   and ensures padding and border do not expand element widths. */
.phi-quote-wrap,
.phi-quote-wrap *,
.phi-quote-wrap *::before,
.phi-quote-wrap *::after {
  box-sizing: border-box;
}

/* Fieldset reset. Browsers apply default border, padding, and min-width to
   fieldsets. The min-width auto behavior in particular causes horizontal
   overflow on narrow viewports because fieldsets refuse to shrink below
   their content's intrinsic width. Resetting to zero allows our flex
   and grid layouts to control sizing. */
.phi-quote-wrap fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Legend reset. Legends have peculiar default rendering that floats them
   above the fieldset border using legacy browser positioning rules that
   supersede normal block layout. The float none and explicit display block
   declarations tell the browser to treat legend as a normal block element
   rather than as a fieldset border replacement. The width 100 percent and
   padding zero ensure the legend respects its parent fieldset padding
   rather than positioning itself relative to the fieldset border. This
   override is required for any fieldset top padding to produce visible
   space above the legend, which is essential for our step heading layout. */
.phi-quote-wrap legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Button reset. Browsers apply native button chrome that varies by OS.
   Elementor applies its own button styles that sometimes leak into nested
   buttons. Resetting to a clean baseline ensures our button rules win. */
.phi-quote-wrap button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Input and select reset. Native form controls have substantial default
   chrome including borders, backgrounds, and OS-specific rendering quirks.
   The appearance reset removes most native chrome on a per-element basis. */
.phi-quote-wrap input,
.phi-quote-wrap select,
.phi-quote-wrap textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

/* List reset. The progress indicator uses an ordered list semantically.
   Default list styling adds bullet markers and indentation we do not want. */
.phi-quote-wrap ol,
.phi-quote-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Anchor reset within form prose. The TCPA consent links and the contact
   links in success and error states need explicit styling to override
   theme link defaults. */
.phi-quote-wrap a {
  color: var(--phi-navy);
  text-decoration: underline;
  font-weight: 500;
  transition: color var(--phi-transition-fast);
}

.phi-quote-wrap a:hover {
  color: var(--phi-navy-deep);
}

/* Heading reset. Browsers apply margins and varying font sizes to h1
   through h6. The form uses h3 and h4 for state headings and subsection
   headings, both of which receive explicit rule definitions later. */
.phi-quote-wrap h1,
.phi-quote-wrap h2,
.phi-quote-wrap h3,
.phi-quote-wrap h4,
.phi-quote-wrap h5,
.phi-quote-wrap h6 {
  margin: 0;
  padding: 0;
  font-weight: inherit;
}

/* Paragraph reset. Themes often apply margin to paragraphs. Form prose
   uses explicit margins via spacing tokens. */
.phi-quote-wrap p {
  margin: 0;
  padding: 0;
}

/* Hidden attribute enforcement. The hidden HTML attribute should set
   display none, but Elementor's own display rules sometimes override it
   when applied to flex containers. The !important is justified here
   because the hidden attribute is the canonical way HTML expresses
   element invisibility, and no styling rule should override it.
   [JUSTIFIED !important #1 of 3] */
.phi-quote-wrap [hidden] {
  display: none !important;
}

/* ============================================================================
   SECTION 03 — LAYOUT PRIMITIVES
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   The outer wrapper, the form container, and the field grid system that
   composes the form's overall layout.
   ============================================================================ */

/* The phi-quote-wrap class is applied to the outermost div surrounding the
   form. Under the unified card architecture, this wrapper owns the card
   chrome including the white background, rounded corners, border, and
   elevation shadow. The progress panel and form body live inside this
   single card as tonal regions rather than as separate cards. The outer
   page padding sits on the parent container in WordPress rather than on
   this wrapper so the card extends to the appropriate page width. */
.phi-quote-wrap {
  font-family: var(--phi-font-body);
  font-size: var(--phi-text-base);
  line-height: var(--phi-leading-relaxed);
  color: var(--phi-gray-800);
  max-width: var(--phi-form-max-width);
  margin: var(--phi-space-6) auto;
  background: var(--phi-white);
  border-radius: var(--phi-radius-xl);
  border: 1px solid var(--phi-gray-200);
  box-shadow: var(--phi-shadow-md);
  overflow: hidden;
}

/* The form element no longer owns the card chrome under the unified
   architecture. The wrapper provides the card boundary. The form simply
   contains the steps and state cards as a transparent inner element. */
.phi-quote-wrap .phi-quote-form {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Field grid system. Mobile baseline is single column. Tablet and desktop
   breakpoints extend the grid to multi-column arrangements. The grid uses
   CSS Grid rather than flexbox because grid handles the responsive column
   span pattern more cleanly. */
.phi-quote-wrap .phi-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--phi-space-4);
}

.phi-quote-wrap .phi-field {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.phi-quote-wrap .phi-field-half,
.phi-quote-wrap .phi-field-third,
.phi-quote-wrap .phi-field-quarter,
.phi-quote-wrap .phi-field-full {
  grid-column: span 1;
}

/* Primary residence reveal wrapper. display:contents removes the
   wrapper's own box so its .phi-field children are promoted into the
   form grid as direct grid items, restoring every span and :has()
   rule above. The wrapper still toggles via the hidden attribute
   (hidden wins over display:contents), so the reveal logic is
   unchanged. Root fix for the nested-grid-item layout defect. */
.phi-quote-wrap .phi-residence-block {
  display: contents;
}
.phi-quote-wrap .phi-residence-block[hidden] {
  display: none;
}

/* ============================================================================
   SECTION 04 — COMPONENT PRIMITIVES
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   The atomic building blocks: labels, inputs, selects, buttons, radios,
   and checkboxes. These rules define the consistent visual treatment for
   every form control regardless of which step or field group contains it.

   INTEGRATED HERE (was v3.1 patch block):
   - accent-color on date/time/month/week inputs (with the input primitives)
   - accent-color + color-scheme on selects, option brand colors (with selects)
   - accent-color on radio/checkbox inputs (with the radio/checkbox primitives)
   - radio-group :has(input.is-invalid) error treatment + :has-less fallback
     (with the radio-option rules)
   - navy focus-ring overrides on inputs/selects/textareas/radios/checkboxes
     (with the focus rules)
   ============================================================================ */

/* Field labels. The required asterisk uses a separate span so its color
   can be controlled independently. The optional indicator follows the
   same pattern. */
.phi-quote-wrap .phi-label {
  display: block;
  font-size: var(--phi-text-sm);
  font-weight: 600;
  color: var(--phi-gray-800);
  margin: 0 0 var(--phi-space-2) 0;
  line-height: var(--phi-leading-snug);
  cursor: pointer;
}

.phi-quote-wrap .phi-required {
  color: var(--phi-error);
  margin-left: 2px;
  font-weight: 700;
}

.phi-quote-wrap .phi-optional {
  color: var(--phi-gray-500);
  font-weight: 400;
  font-size: var(--phi-text-xs);
  margin-left: var(--phi-space-1);
}

/* Helper text appears below the field providing guidance or context.
   Error text appears below the field providing validation feedback. */
.phi-quote-wrap .phi-helper-text {
  font-size: var(--phi-text-xs);
  color: var(--phi-gray-600);
  margin: var(--phi-space-1) 0 0 0;
  line-height: var(--phi-leading-normal);
}

.phi-quote-wrap .phi-error-text {
  font-size: var(--phi-text-xs);
  color: var(--phi-error);
  margin: var(--phi-space-1) 0 0 0;
  font-weight: 500;
  line-height: var(--phi-leading-normal);
  display: flex;
  align-items: center;
  gap: var(--phi-space-1);
}

/* Warning glyph prefix on error text. Uses a Unicode character rather than
   an icon font or SVG so no external resource is required. */
.phi-quote-wrap .phi-error-text::before {
  content: "\26A0";
  font-size: var(--phi-text-sm);
}

/* Text input and select base styling. Both share the same dimensions,
   border treatment, and focus behavior so the form has visual consistency. */
.phi-quote-wrap .phi-input,
.phi-quote-wrap .phi-select {
  width: 100%;
  height: var(--phi-input-height);
  padding: 0 var(--phi-input-padding-x);
  font-family: var(--phi-font-body);
  font-size: var(--phi-text-base);
  color: var(--phi-gray-900);
  background: var(--phi-white);
  border: 1.5px solid var(--phi-gray-300);
  border-radius: var(--phi-radius-md);
  transition: border-color var(--phi-transition-fast), box-shadow var(--phi-transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Select chevron. Uses two CSS gradients to draw a downward triangle
   without any inline SVG content. RETAINED BY DECISION 2026-05-14: the
   CSS-gradient technique is valid CSS; the WAF constraint that originally
   motivated it is gone, but the operator chose to keep the technique. The
   chevron renders canonical brand navy because var(--phi-navy) resolves to
   #1B3A6B from the canonical foundation. */
.phi-quote-wrap .phi-select {
  padding-right: var(--phi-space-10);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--phi-navy) 50%),
    linear-gradient(135deg, var(--phi-navy) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 1px),
    calc(100% - 12px) calc(50% - 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* INTEGRATED (v3.1): accent-color on selects so the native dropdown uses
   brand colors. color-scheme: light keeps the native option list on a
   light background. */
.phi-quote-wrap select {
  accent-color: var(--phi-navy);
  color-scheme: light;
}

/* INTEGRATED (v3.1): native select option brand colors. Browser support
   for styling native option elements varies by engine; this is a
   progressive enhancement. !important is required here because native
   option rendering ignores normal-specificity author styles in several
   engines. This is a documented-justified case, not specificity escalation.
   [JUSTIFIED !important #2 of 3] */
.phi-quote-wrap option:checked,
.phi-quote-wrap option:hover,
.phi-quote-wrap option:focus {
  background-color: var(--phi-navy) !important;
  color: var(--phi-white) !important;
}

/* INTEGRATED (v3.1): accent-color on native date/time pickers so the
   selected date and today-highlight use brand navy instead of the
   browser-default pink/purple. */
.phi-quote-wrap input[type="date"],
.phi-quote-wrap input[type="time"],
.phi-quote-wrap input[type="datetime-local"],
.phi-quote-wrap input[type="month"],
.phi-quote-wrap input[type="week"] {
  accent-color: var(--phi-navy);
}

/* Date input height needs explicit declaration because some browsers
   render date inputs at heights different from text inputs. */
.phi-quote-wrap .phi-input[type="date"] {
  height: var(--phi-input-height);
  line-height: var(--phi-input-height);
}

/* Number input spinner suppression. The native increment and decrement
   buttons clutter the visual design and are redundant with the touch
   keyboard's number entry. */
.phi-quote-wrap .phi-input[type="number"]::-webkit-inner-spin-button,
.phi-quote-wrap .phi-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.phi-quote-wrap .phi-input[type="number"] {
  -moz-appearance: textfield;
}

/* Hover state. Darker border indicates the field is interactive. */
.phi-quote-wrap .phi-input:hover:not(:disabled):not(:focus),
.phi-quote-wrap .phi-select:hover:not(:disabled):not(:focus) {
  border-color: var(--phi-gray-400);
}

/* Focus state. Navy border plus outer ring meets WCAG 2.2 AA focus
   indicator requirements with sufficient contrast against both the
   field background and the page background. */
.phi-quote-wrap .phi-input:focus,
.phi-quote-wrap .phi-select:focus {
  outline: none;
  border-color: var(--phi-navy);
  box-shadow: 0 0 0 4px var(--phi-focus-ring);
}

/* INTEGRATED (v3.1): navy focus-ring override on inputs/selects/textareas.
   The browser-default focus ring uses the system accent color which can be
   browser-blue or platform-specific. This override forces brand navy for
   consistency across all browsers. Cascade note: this :focus-visible rule
   sits AFTER the :focus rule above; for keyboard focus both apply and the
   outline here plus the box-shadow above together form the indicator. */
.phi-quote-wrap input:focus-visible,
.phi-quote-wrap select:focus-visible,
.phi-quote-wrap textarea:focus-visible {
  outline: 2px solid var(--phi-navy);
  outline-offset: 2px;
}

/* Error state. Combines red border, error background tint, and the
   error glyph in helper text below to convey error state through
   multiple non-color cues for users with color vision deficiencies. */
.phi-quote-wrap .phi-input.is-invalid,
.phi-quote-wrap .phi-select.is-invalid {
  border-color: var(--phi-error);
  background-color: var(--phi-error-bg);
}

/* Error-state focus glow. The translucent red glow is derived from the
   brand error token via color-mix rather than a hardcoded rgba literal.
   var(--phi-error) is #B91C1C; at 15% over transparent this renders the
   exact translucent red the source used (the source literal rgba(185,28,28,0.15)
   IS this color) — now token-driven, single source of truth, no literal.
   color-mix is Baseline Widely Available (verified 2026). */
.phi-quote-wrap .phi-input.is-invalid:focus,
.phi-quote-wrap .phi-select.is-invalid:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--phi-error) 15%, transparent);
}

/* Disabled state. Reduced contrast and not-allowed cursor signal the
   field cannot currently be edited. Used for cascading dropdowns
   waiting for parent selection. */
.phi-quote-wrap .phi-input:disabled,
.phi-quote-wrap .phi-select:disabled {
  background: var(--phi-gray-100);
  color: var(--phi-gray-500);
  cursor: not-allowed;
  opacity: 0.7;
}

.phi-quote-wrap .phi-input::placeholder {
  color: var(--phi-gray-400);
  font-weight: 400;
}

/* Autofill background suppression. Browsers apply their own background
   color to autofilled inputs at a priority that ordinary author styles
   cannot override directly. The inset box-shadow technique masks that
   background with the form's own white fill, and the long transition
   delay prevents the browser's autofill color from flashing in before
   the mask applies. text-fill-color preserves the input text color
   against the browser's autofill text override. */
.phi-quote-wrap .phi-input:-webkit-autofill,
.phi-quote-wrap .phi-input:-webkit-autofill:hover,
.phi-quote-wrap .phi-input:-webkit-autofill:focus,
.phi-quote-wrap .phi-select:-webkit-autofill,
.phi-quote-wrap .phi-select:-webkit-autofill:hover,
.phi-quote-wrap .phi-select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--phi-white) inset;
  box-shadow: 0 0 0 1000px var(--phi-white) inset;
  -webkit-text-fill-color: var(--phi-gray-900);
  transition: background-color 5000s ease-in-out 0s;
}

/* Radio and checkbox option containers. Each option is a card-style
   element that highlights when selected. The card pattern produces
   touch targets that exceed WCAG 2.2 AA minimums and provides clearer
   visual feedback than bare inputs. */
.phi-quote-wrap .phi-radio-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--phi-space-2);
}

.phi-quote-wrap .phi-radio-option,
.phi-quote-wrap .phi-checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--phi-space-3);
  padding: var(--phi-space-3) var(--phi-space-4);
  background: var(--phi-white);
  border: 1.5px solid var(--phi-gray-300);
  border-radius: var(--phi-radius-md);
  cursor: pointer;
  transition: border-color var(--phi-transition-fast), background-color var(--phi-transition-fast);
  min-height: var(--phi-touch-target-min);
}

.phi-quote-wrap .phi-checkbox-option {
  align-items: flex-start;
}

.phi-quote-wrap .phi-radio-option:hover,
.phi-quote-wrap .phi-checkbox-option:hover {
  border-color: var(--phi-navy-light);
  background: var(--phi-cream);
}

/* Selected state via :has selector. Modern browsers support :has, which
   lets us style the parent option container based on the input checked
   state without JavaScript. The selector falls back gracefully to the
   default unselected appearance in older browsers that lack :has support. */
.phi-quote-wrap .phi-radio-option:has(.phi-radio:checked),
.phi-quote-wrap .phi-checkbox-option:has(.phi-checkbox:checked) {
  border-color: var(--phi-navy);
  background: var(--phi-cream);
  box-shadow: 0 0 0 1px var(--phi-navy);
}

.phi-quote-wrap .phi-radio-option:has(.phi-radio:focus-visible),
.phi-quote-wrap .phi-checkbox-option:has(.phi-checkbox:focus-visible) {
  box-shadow: 0 0 0 4px var(--phi-focus-ring);
}

/* The actual radio and checkbox inputs sized for clear visibility while
   maintaining the option container as the primary touch target.
   INTEGRATED (v3.1): accent-color so the filled radio dot / checkbox tick
   uses brand navy rather than the browser default. */
.phi-quote-wrap .phi-radio,
.phi-quote-wrap .phi-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--phi-navy);
  cursor: pointer;
  flex-shrink: 0;
}

.phi-quote-wrap .phi-checkbox {
  margin-top: 2px;
}

/* INTEGRATED (v3.1): accent-color on the raw radio/checkbox type selectors
   as well, covering any radio/checkbox not carrying the .phi-radio /
   .phi-checkbox class (defensive — the form markup uses the classes, but
   this guards dynamically cloned fields). */
.phi-quote-wrap input[type="radio"],
.phi-quote-wrap input[type="checkbox"] {
  accent-color: var(--phi-navy);
}

/* INTEGRATED (v3.1): radio/checkbox focus ring. The native focus ring on
   radio inputs is typically a thin browser-blue ring. Replace with a
   thicker navy ring for visibility and brand alignment. */
.phi-quote-wrap input[type="radio"]:focus-visible,
.phi-quote-wrap input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--phi-navy);
  outline-offset: 3px;
}

.phi-quote-wrap .phi-radio-label,
.phi-quote-wrap .phi-checkbox-label {
  font-size: var(--phi-text-base);
  color: var(--phi-gray-800);
  line-height: var(--phi-leading-snug);
  user-select: none;
}

.phi-quote-wrap .phi-checkbox-label {
  line-height: var(--phi-leading-normal);
}

/* INTEGRATED (v3.1): radio group validation error state. When a radio
   fieldset fails validation, the validation layer applies .is-invalid to
   the radio inputs but not to the visible card wrappers. Without these
   rules the card shows a gray border that does not match the red error
   treatment used by text inputs and selects. These rules give the radio
   cards the same red error treatment.
   !important is required here: the .phi-radio-option base rule and its
   :hover and :has(:checked) rules all set border-color, and the error
   state must win over all of them regardless of interaction state. This
   is a documented-justified case. [JUSTIFIED !important #3 of 3]
   Cascade note: placed AFTER all .phi-radio-option border rules so source
   order plus !important together guarantee the win. */
.phi-quote-wrap .phi-radio-group:has(input.is-invalid) .phi-radio-option {
  border-color: var(--phi-error) !important;
  background-color: color-mix(in srgb, var(--phi-error) 4%, transparent) !important;
}

.phi-quote-wrap .phi-radio-group:has(input.is-invalid) .phi-label {
  color: var(--phi-error);
}

/* INTEGRATED (v3.1): :has-less fallback for the radio error state. For
   browsers without :has support, the validation layer also applies the
   .phi-touched-invalid class, which these sibling-combinator selectors
   target. */
.phi-quote-wrap .phi-radio-group input.phi-touched-invalid ~ .phi-radio-options .phi-radio-option,
.phi-quote-wrap .phi-radio-options:has(input.phi-touched-invalid) .phi-radio-option {
  border-color: var(--phi-error) !important;
}

/* TCPA consent block. Smaller text accommodates the legal density and
   the cream background distinguishes it from regular form fields. */
.phi-quote-wrap .phi-tcpa-consent {
  align-items: flex-start;
  padding: var(--phi-space-4);
  background: var(--phi-cream);
}

.phi-quote-wrap .phi-tcpa-text {
  font-size: var(--phi-text-xs);
  line-height: var(--phi-leading-relaxed);
  color: var(--phi-gray-700);
}

/* Buttons. The primary, secondary, submit, add, and retry button variants
   share base dimensions and only differ in their fill, border, and hover
   color treatments. */
.phi-quote-wrap .phi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--phi-space-2);
  height: var(--phi-button-height);
  padding: 0 var(--phi-button-padding-x);
  font-family: var(--phi-font-body);
  font-size: var(--phi-text-base);
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--phi-radius-md);
  cursor: pointer;
  transition: background-color var(--phi-transition-fast), border-color var(--phi-transition-fast), color var(--phi-transition-fast), transform var(--phi-transition-fast), box-shadow var(--phi-transition-fast);
  text-decoration: none;
  white-space: nowrap;
  min-width: var(--phi-button-min-width);
}

.phi-quote-wrap .phi-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--phi-focus-ring);
}

.phi-quote-wrap .phi-btn-arrow {
  font-size: var(--phi-text-lg);
  line-height: 1;
}

/* Next button — primary navigation forward. Navy fill produces strong
   visual call to action. */
.phi-quote-wrap .phi-btn-next {
  background: var(--phi-navy);
  border-color: var(--phi-navy);
  color: var(--phi-white);
}

.phi-quote-wrap .phi-btn-next:hover {
  background: var(--phi-navy-deep);
  border-color: var(--phi-navy-deep);
  transform: translateY(-1px);
  box-shadow: var(--phi-shadow-md);
}

.phi-quote-wrap .phi-btn-next:active {
  transform: translateY(0);
}

/* Previous button — secondary navigation backward. Outline treatment
   reduces visual weight relative to the primary forward action. */
.phi-quote-wrap .phi-btn-prev {
  background: var(--phi-white);
  border-color: var(--phi-gray-300);
  color: var(--phi-gray-700);
}

.phi-quote-wrap .phi-btn-prev:hover {
  background: var(--phi-gray-100);
  border-color: var(--phi-gray-400);
  color: var(--phi-gray-900);
}

/* Submit button — final CTA. Gold fill distinguishes the submit action
   from intermediate Continue actions. */
.phi-quote-wrap .phi-btn-submit {
  background: var(--phi-gold);
  border-color: var(--phi-gold);
  color: var(--phi-navy-deep);
  font-weight: 700;
}

.phi-quote-wrap .phi-btn-submit:hover {
  background: var(--phi-gold-deep);
  border-color: var(--phi-gold-deep);
  color: var(--phi-white);
  transform: translateY(-1px);
  box-shadow: var(--phi-shadow-md);
}

/* Add button — adds another driver or vehicle in conditional reveal
   containers. */
.phi-quote-wrap .phi-btn-add {
  background: var(--phi-cream);
  border-color: var(--phi-navy);
  color: var(--phi-navy);
  font-weight: 500;
}

.phi-quote-wrap .phi-btn-add:hover {
  background: var(--phi-navy);
  color: var(--phi-white);
}

.phi-quote-wrap .phi-btn-add-icon {
  font-size: var(--phi-text-xl);
  line-height: 1;
  font-weight: 400;
}

/* Retry button — appears in error state for resubmission. */
.phi-quote-wrap .phi-btn-retry {
  background: var(--phi-white);
  border-color: var(--phi-error);
  color: var(--phi-error);
}

.phi-quote-wrap .phi-btn-retry:hover {
  background: var(--phi-error);
  color: var(--phi-white);
}

/* Link-style buttons for vehicle dropdown mode toggles. Inline with form
   prose rather than card-style buttons. */
.phi-quote-wrap .phi-link-btn {
  background: none;
  border: none;
  color: var(--phi-navy);
  font-family: var(--phi-font-body);
  font-size: var(--phi-text-sm);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  padding: var(--phi-space-2);
  margin: 0;
  text-align: left;
  min-width: 0;
  height: auto;
}

.phi-quote-wrap .phi-link-btn:hover {
  color: var(--phi-navy-deep);
}

.phi-quote-wrap .phi-link-btn:focus-visible {
  outline: 2px solid var(--phi-navy);
  outline-offset: 2px;
  border-radius: var(--phi-radius-sm);
  box-shadow: none;
}

/* ============================================================================
   SECTION 05 — COMPOSITE COMPONENTS
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   The composite assemblies: progress indicator, step fieldsets, subsection
   headings, state cards, and conditional reveal containers. These rules
   build on the primitives from section 04 to create the form's structural
   visual elements.
   ============================================================================ */

/* Progress indicator panel. Cream background creates tonal distinction
   from the white step body within the unified card. No independent
   border radius because the wrapper card provides the outer rounding
   and the progress panel sits flush within that boundary. Position
   relative supports the gradient overlay pseudo-element below. */
.phi-quote-wrap .phi-quote-progress {
  background: var(--phi-cream);
  padding: var(--phi-space-5) var(--phi-space-4);
  border-bottom: 1px solid var(--phi-gray-200);
  margin-bottom: var(--phi-space-8);
  position: relative;
}

/* Soft gradient overlay at progress panel boundary. The cream color
   blends downward into transparent, eliminating the hard horizontal line
   between the cream panel and the white step body. */
.phi-quote-wrap .phi-quote-progress::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 8px;
  background: linear-gradient(to bottom, var(--phi-cream) 0%, transparent 100%);
  pointer-events: none;
}

/* Step pill list. Flexbox distributes pills evenly across the panel width. */
.phi-quote-wrap .phi-quote-steps-indicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--phi-space-4) 0;
  gap: var(--phi-space-2);
}

.phi-quote-wrap .phi-step-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--phi-space-1);
  flex: 1;
  position: relative;
  text-align: center;
}

/* Step number circle. Default state is outlined gray. Active state fills
   navy with white text and adds a focus ring. Complete state fills navy
   and replaces the number with a checkmark. */
.phi-quote-wrap .phi-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--phi-pill-size);
  height: var(--phi-pill-size);
  border-radius: var(--phi-radius-full);
  background: var(--phi-white);
  border: 2px solid var(--phi-gray-300);
  color: var(--phi-gray-500);
  font-weight: 600;
  font-size: var(--phi-text-sm);
  transition: background-color var(--phi-transition-base), border-color var(--phi-transition-base), color var(--phi-transition-base);
}

.phi-quote-wrap .phi-step-pill.is-active .phi-step-num {
  background: var(--phi-navy);
  border-color: var(--phi-navy);
  color: var(--phi-white);
  box-shadow: 0 0 0 4px var(--phi-focus-ring);
}

.phi-quote-wrap .phi-step-pill.is-complete .phi-step-num {
  background: var(--phi-navy);
  border-color: var(--phi-navy);
  color: transparent;
  font-size: 0;
}

.phi-quote-wrap .phi-step-pill.is-complete .phi-step-num::after {
  content: "\2713";
  color: var(--phi-white);
  font-size: var(--phi-text-base);
}

/* Step label below the pill number. Uppercase and tracked for legibility
   at small sizes. */
.phi-quote-wrap .phi-step-label {
  font-size: var(--phi-text-xs);
  color: var(--phi-gray-600);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.phi-quote-wrap .phi-step-pill.is-active .phi-step-label {
  color: var(--phi-navy-deep);
  font-weight: 600;
}

/* Progress bar below the pills. Animated width fills as user advances. */
.phi-quote-wrap .phi-progress-bar {
  height: 4px;
  background: var(--phi-gray-200);
  border-radius: var(--phi-radius-full);
  overflow: hidden;
}

.phi-quote-wrap .phi-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--phi-navy) 0%, var(--phi-navy-light) 100%);
  border-radius: var(--phi-radius-full);
  transition: width var(--phi-transition-slow);
}

/* Step fieldset. The outer container for each step's content. Padding
   provides the breathing room between content and the step boundaries.
   Top padding is larger than bottom to provide visual separation from
   the progress panel above. The animation runs when JavaScript reveals
   each step during navigation. */
.phi-quote-wrap .phi-step {
  padding: var(--phi-step-padding-mobile);
  animation: phi-step-enter var(--phi-transition-base);
}

@keyframes phi-step-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Step heading. Playfair Display creates visual hierarchy distinct from
   the Inter body text. Deep navy color provides strong contrast. */
.phi-quote-wrap .phi-step-heading {
  font-family: var(--phi-font-heading);
  font-size: var(--phi-text-2xl);
  font-weight: 600;
  color: var(--phi-navy-deep);
  margin: 0 0 var(--phi-space-1) 0;
  line-height: var(--phi-leading-tight);
  letter-spacing: 0.01em;
}

.phi-quote-wrap .phi-step-subhead {
  font-size: var(--phi-text-base);
  color: var(--phi-gray-600);
  margin: 0 0 var(--phi-space-8) 0;
  line-height: var(--phi-leading-normal);
}

.phi-quote-wrap .phi-step-body {
  margin-bottom: var(--phi-space-6);
}

/* Subsection heading inside a step. Used for grouped fields like the
   garaging address or mailing address blocks. */
.phi-quote-wrap .phi-subsection-heading {
  font-family: var(--phi-font-heading);
  font-size: var(--phi-text-lg);
  font-weight: 600;
  color: var(--phi-navy-deep);
  margin: var(--phi-space-4) 0 var(--phi-space-1) 0;
  line-height: var(--phi-leading-snug);
}

.phi-quote-wrap .phi-subsection-helper {
  font-size: var(--phi-text-sm);
  color: var(--phi-gray-600);
  margin: 0 0 var(--phi-space-3) 0;
}

/* Placeholder text for step bodies awaiting field population during
   incremental builds. Production forms have all fields populated. */
.phi-quote-wrap .phi-placeholder {
  font-size: var(--phi-text-sm);
  color: var(--phi-gray-500);
  font-style: italic;
  padding: var(--phi-space-4);
  background: var(--phi-gray-50);
  border-radius: var(--phi-radius-md);
  border: 1px dashed var(--phi-gray-300);
  margin: 0;
}

/* Step navigation footer holding the Back and Continue buttons. Border
   top creates separation from the field content above. */
.phi-quote-wrap .phi-step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--phi-space-3);
  padding-top: var(--phi-space-6);
  border-top: 1px solid var(--phi-gray-200);
  margin-top: var(--phi-space-6);
}

/* Step 1 has only the Continue button, so it gets right-aligned. */
.phi-quote-wrap .phi-step[data-step="1"] .phi-step-nav {
  justify-content: flex-end;
}

/* State cards. Submitting, success, and error states each take over the
   form's display when their respective conditions are met. */
.phi-quote-wrap .phi-quote-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--phi-space-12) var(--phi-space-6);
  animation: phi-state-enter var(--phi-transition-base);
}

@keyframes phi-state-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.phi-quote-wrap .phi-state-heading {
  font-family: var(--phi-font-heading);
  font-size: var(--phi-text-2xl);
  font-weight: 600;
  color: var(--phi-navy-deep);
  margin: var(--phi-space-4) 0 var(--phi-space-3) 0;
  line-height: var(--phi-leading-tight);
}

.phi-quote-wrap .phi-state-message {
  font-size: var(--phi-text-base);
  color: var(--phi-gray-700);
  margin: 0 0 var(--phi-space-3) 0;
  line-height: var(--phi-leading-relaxed);
  max-width: 480px;
}

/* Submitting spinner. Pure CSS spin animation with no SVG. */
.phi-quote-wrap .phi-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--phi-gray-200);
  border-top-color: var(--phi-navy);
  border-radius: var(--phi-radius-full);
  animation: phi-spin 0.8s linear infinite;
}

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

/* Success and error icons use Unicode glyphs rather than icon fonts or SVG. */
.phi-quote-wrap .phi-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--phi-success-light);
  color: var(--phi-success);
  border-radius: var(--phi-radius-full);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.phi-quote-wrap .phi-error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--phi-error-light);
  color: var(--phi-error);
  border-radius: var(--phi-radius-full);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

/* Reference number display in success state. Monospace font ensures the
   alphanumeric code reads cleanly. */
.phi-quote-wrap .phi-reference-number {
  display: inline-block;
  background: var(--phi-cream);
  color: var(--phi-navy-deep);
  font-family: var(--phi-font-mono);
  font-size: var(--phi-text-xl);
  font-weight: 700;
  padding: var(--phi-space-3) var(--phi-space-5);
  border-radius: var(--phi-radius-md);
  border: 1.5px solid var(--phi-navy);
  letter-spacing: 0.05em;
  margin: var(--phi-space-2) 0 var(--phi-space-4) 0;
}

/* Error state container receives a tinted background to reinforce the
   error state visually without overwhelming the page. */
.phi-quote-wrap .phi-state-error {
  background: var(--phi-error-bg);
  border-radius: var(--phi-radius-xl);
}

/* ============================================================================
   SECTION 06 — CONDITIONAL BEHAVIOR STATES
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   The reveal animations, loading states, and special conditional
   containers that appear and disappear based on user input.
   ============================================================================ */

/* Conditional reveal containers for additional drivers, additional
   vehicles, current insurance details, and other carrier text input.
   The cream background distinguishes these as branched content from
   the main form flow. */
.phi-quote-wrap #additional-drivers-container,
.phi-quote-wrap #additional-vehicles-container,
.phi-quote-wrap #current-insurance-container,
.phi-quote-wrap #other-carrier-container {
  background: var(--phi-cream);
  border-radius: var(--phi-radius-md);
  padding: var(--phi-space-4);
  margin-top: var(--phi-space-2);
  animation: phi-reveal var(--phi-transition-base);
}

@keyframes phi-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.phi-quote-wrap .phi-additional-drivers-list,
.phi-quote-wrap .phi-additional-vehicles-list {
  display: flex;
  flex-direction: column;
  gap: var(--phi-space-4);
  margin-bottom: var(--phi-space-3);
}

.phi-quote-wrap .phi-additional-drivers-list:empty,
.phi-quote-wrap .phi-additional-vehicles-list:empty {
  display: none;
}

/* Individual additional entry card. Each dynamically added driver or
   vehicle renders as a card with the heading, remove button, and field
   set inside. */
.phi-quote-wrap .phi-additional-entry {
  background: var(--phi-white);
  border: 1.5px solid var(--phi-gray-200);
  border-radius: var(--phi-radius-md);
  padding: var(--phi-space-4);
  position: relative;
}

.phi-quote-wrap .phi-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--phi-space-3);
  padding-bottom: var(--phi-space-3);
  border-bottom: 1px solid var(--phi-gray-200);
}

.phi-quote-wrap .phi-entry-heading {
  font-family: var(--phi-font-heading);
  font-size: var(--phi-text-base);
  font-weight: 600;
  color: var(--phi-navy-deep);
  margin: 0;
  line-height: var(--phi-leading-snug);
}

.phi-quote-wrap .phi-entry-remove {
  color: var(--phi-error);
  font-size: var(--phi-text-sm);
  font-weight: 500;
}

.phi-quote-wrap .phi-entry-remove:hover {
  color: var(--phi-error);
  text-decoration-thickness: 2px;
}

/* Vehicle mode toggles for cascading dropdowns vs manual entry. */
.phi-quote-wrap .phi-vehicle-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--phi-space-2);
  margin-top: var(--phi-space-3);
  padding-top: var(--phi-space-3);
  border-top: 1px dashed var(--phi-gray-200);
}

/* Loading state on cascading dropdowns. The is-loading class is applied
   to the parent .phi-field wrapper by JavaScript when fetching from the
   vehicle-lookup proxy. The chevron is hidden during loading and a
   spinner pseudo-element appears in its place. */
.phi-quote-wrap .phi-field.is-loading .phi-select {
  background-image: none;
  cursor: wait;
}

.phi-quote-wrap .phi-field.is-loading {
  position: relative;
}

.phi-quote-wrap .phi-field.is-loading::after {
  content: "";
  position: absolute;
  right: var(--phi-space-3);
  top: 50%;
  transform: translateY(calc(-50% + 12px));
  width: 16px;
  height: 16px;
  border: 2px solid var(--phi-gray-300);
  border-top-color: var(--phi-navy);
  border-radius: var(--phi-radius-full);
  animation: phi-spin 0.8s linear infinite;
  pointer-events: none;
}

/* Honeypot field. The five-layer hiding ensures bots fill it while
   humans never see it. The !important on these properties is justified
   because the honeypot is a security mechanism whose visibility must
   not be overridden by any other CSS regardless of source.
   NOTE: this is the security-mechanism !important block referenced in
   the file header. It is a single cohesive justified block, not counted
   among the three individually-flagged !important cases above because it
   is a recognized security pattern, documented as such. */
.phi-quote-wrap .phi-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cloudflare Turnstile widget container. The widget itself renders an
   iframe of fixed dimensions controlled by Cloudflare. */
.phi-quote-wrap .cf-turnstile {
  display: flex;
  justify-content: center;
  margin: var(--phi-space-3) 0;
  min-height: 65px;
}

.phi-quote-wrap .cf-turnstile iframe {
  border-radius: var(--phi-radius-md);
}

/* ============================================================================
   SECTION 07 — RESPONSIVE ENHANCEMENTS
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   Mobile is the baseline. Tablet at 640px and desktop at 1024px expand the
   layout. The mobile button-stack rule (max-width: 639px) is the lower
   bound, integrated here from the former v3.2 patch.

   INTEGRATED HERE (was v3.2 patch block):
   - mobile button-stack @media (max-width: 639px) — placed FIRST in this
     section as the mobile-floor rule, before the min-width tablet/desktop
     progressive enhancements, so the responsive cascade reads bottom-up.
   ============================================================================ */

/* INTEGRATED (v3.2): mobile button stack. Below 640px the horizontal
   .phi-step-nav layout cannot fit two min-width:140px buttons plus gap
   plus internal padding within the ~295px available content width on a
   375px viewport, which clips the Continue button. Fix: stack the buttons
   vertically with Continue on top (column-reverse places the
   HTML-second primary button above the HTML-first secondary button) and
   make each full-width. Tablet at 640px+ retains horizontal layout.
   Cascade note: this max-width rule and the min-width rules below are
   mutually exclusive by breakpoint, so there is no cascade conflict;
   placed first for logical mobile-floor-then-enhance reading order. */
@media (max-width: 639px) {

  .phi-quote-wrap .phi-step-nav {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--phi-space-3);
  }

  /* When stacked, each button takes full width of the container. The
     min-width:0 override defeats the base .phi-btn min-width:140px because
     the full-width treatment supersedes the horizontal-layout minimum. */
  .phi-quote-wrap .phi-step-nav .phi-btn,
  .phi-quote-wrap .phi-step-nav .phi-btn-prev,
  .phi-quote-wrap .phi-step-nav .phi-btn-next,
  .phi-quote-wrap .phi-step-nav .phi-btn-submit {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  /* Step 1 has only the Continue button. The flex-end alignment from the
     Section 05 base rule conflicts with the stretch alignment set just
     above. Reset to stretch so the single button takes full width like
     the multi-button steps. */
  .phi-quote-wrap .phi-step[data-step="1"] .phi-step-nav {
    justify-content: stretch;
    align-items: stretch;
  }
}

/* Tablet breakpoint. 640 pixels is where two-column field grids become
   readable without becoming cramped. */
@media (min-width: 640px) {

  .phi-quote-wrap .phi-step {
    padding: var(--phi-step-padding-tablet);
  }

  .phi-quote-wrap .phi-quote-progress {
    padding: var(--phi-space-6) var(--phi-space-8);
  }

  .phi-quote-wrap .phi-step-heading {
    font-size: var(--phi-text-3xl);
  }

  .phi-quote-wrap .phi-state-heading {
    font-size: var(--phi-text-3xl);
  }

  .phi-quote-wrap .phi-step-num {
    width: var(--phi-pill-size-tablet);
    height: var(--phi-pill-size-tablet);
    font-size: var(--phi-text-base);
  }

  .phi-quote-wrap .phi-step-label {
    font-size: var(--phi-text-sm);
  }

  /* Field grid expands to four-column at tablet. Fields can span 2 of 4
     for half-width or 4 of 4 for full width. */
  .phi-quote-wrap .phi-field-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--phi-space-5);
  }

  .phi-quote-wrap .phi-field-half {
    grid-column: span 2;
  }

  .phi-quote-wrap .phi-field-third {
    grid-column: span 4;
  }

  .phi-quote-wrap .phi-field-quarter {
    grid-column: span 2;
  }

  .phi-quote-wrap .phi-field-full {
    grid-column: span 4;
  }

  /* Radio options can sit two-up on tablet for compact yes/no questions. */
  .phi-quote-wrap .phi-radio-options {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bundle question has four radio options. Stacking is more readable
     than two-up for that quantity. */
  .phi-quote-wrap .phi-radio-group:has(input[name="bundle_interest"]) .phi-radio-options {
    grid-template-columns: 1fr;
  }
}

/* Desktop breakpoint. 1024 pixels is where six-column field grids unlock
   the most flexible layout including narrow fields like state and zip. */
@media (min-width: 1024px) {

  .phi-quote-wrap .phi-step {
    padding: var(--phi-step-padding-desktop);
  }

  /* Six-column grid lets us produce one-third, half, two-thirds, and
     full-width fields with clean alignment. */
  .phi-quote-wrap .phi-field-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .phi-quote-wrap .phi-field-half {
    grid-column: span 3;
  }

  .phi-quote-wrap .phi-field-third {
    grid-column: span 2;
  }

  .phi-quote-wrap .phi-field-quarter {
    grid-column: span 1;
  }

  .phi-quote-wrap .phi-field-full {
    grid-column: span 6;
  }

  /* State and zip fields are narrow on desktop. City field expands to
     compensate so the address row remains balanced. */
  .phi-quote-wrap .phi-field-quarter:has(input[name$="_zip"]),
  .phi-quote-wrap .phi-field-quarter:has(select[name$="_state"]) {
    grid-column: span 1;
  }

  .phi-quote-wrap .phi-field-half:has(input[name$="_city"]) {
    grid-column: span 4;
  }

  /* Vehicle dropdowns stay as three equal columns on desktop. */
  .phi-quote-wrap #vehicle-mode-dropdown .phi-field-third,
  .phi-quote-wrap #vehicle-mode-manual .phi-field-third {
    grid-column: span 2;
  }
}

/* ============================================================================
   SECTION 08 — ACCESSIBILITY REFINEMENTS
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   Honor user preferences for reduced motion and high contrast.
   ============================================================================ */

/* Reduced motion preference. Users with vestibular disorders or motion
   sensitivity benefit from minimal animation. The spinner exception
   preserves the loading indicator at slower speed since it is a
   functional indicator rather than decorative animation. */
@media (prefers-reduced-motion: reduce) {

  .phi-quote-wrap *,
  .phi-quote-wrap *::before,
  .phi-quote-wrap *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .phi-quote-wrap .phi-spinner,
  .phi-quote-wrap .phi-field.is-loading::after {
    animation: phi-spin 2s linear infinite !important;
  }
}

/* High contrast preference. Users with low vision benefit from heavier
   borders and more saturated color combinations. The override darkens
   the gray scale and thickens borders. The local gray-scale token
   reassignment here is scoped to .phi-quote-wrap and is intentional —
   it is a media-query-conditional token override, not a base redefinition. */
@media (prefers-contrast: more) {

  .phi-quote-wrap {
    --phi-gray-200: #4B5563;
    --phi-gray-300: #6B7280;
  }

  .phi-quote-wrap .phi-input,
  .phi-quote-wrap .phi-select,
  .phi-quote-wrap .phi-btn {
    border-width: 2px;
  }
}

/* ============================================================================
   SECTION 09 — PRINT STYLESHEET
   ============================================================================
   Scope: P&C-FAMILY-SHARED (candidate for P&C base extraction)

   Graceful degradation when users print the form. Removes interactive
   chrome and reveals all steps so the printed page captures the full
   form content as a static document.
   ============================================================================ */

@media print {

  .phi-quote-wrap {
    background: var(--phi-white);
    box-shadow: none;
    border: none;
    max-width: none;
  }

  .phi-quote-wrap .phi-step[hidden] {
    display: block !important;
  }

  .phi-quote-wrap .phi-step-nav,
  .phi-quote-wrap .phi-quote-state {
    display: none !important;
  }
}

/* ============================================================================
   END OF FILE — Auto Quote Form CSS v3.3
   ============================================================================ */

/* ============================================================================
   PRIME HARBOR CANONICAL BOUNDED SELECT SYSTEM
   Ported from the verified Children's Whole Life quote-form selector.
   Scope: presentation/interaction layer only. Native <select> remains the
   authoritative field for validation, form state, payload construction, and
   all existing business logic.
   ============================================================================ */
.phi-bound-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.phi-bound-select__source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.phi-bound-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #0b2341;
  background: #fff;
  background-color: #fff;
  background-image: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
/* Selected value owns the flexible text lane. min-width:0 is essential in flex
   layouts so long labels wrap instead of forcing the control past its column. */
.phi-bound-select__trigger > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}
/* Exact visual geometry from the verified Children's Whole Life combobox.
   This intentionally replaces legacy select geometry for the selector only. */
.phi-quote-form-page .phi-bound-select__trigger,
.phi-quote-wrap .phi-bound-select__trigger {
  min-height: 50px;
  height: auto;
  padding: 12px 16px;
  border: 1px solid #bcc8d7;
  border-radius: 6px;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #0b2341;
}
/* Elementor/WordPress global button-state protection. */
.phi-quote-form-page .phi-bound-select__trigger,
.phi-quote-form-page .phi-bound-select__trigger:hover,
.phi-quote-form-page .phi-bound-select__trigger:focus,
.phi-quote-form-page .phi-bound-select__trigger:focus-visible,
.phi-quote-form-page .phi-bound-select__trigger:active,
.phi-quote-form-page .phi-bound-select__trigger[aria-expanded="true"],
.phi-quote-wrap .phi-bound-select__trigger,
.phi-quote-wrap .phi-bound-select__trigger:hover,
.phi-quote-wrap .phi-bound-select__trigger:focus,
.phi-quote-wrap .phi-bound-select__trigger:focus-visible,
.phi-quote-wrap .phi-bound-select__trigger:active,
.phi-quote-wrap .phi-bound-select__trigger[aria-expanded="true"] {
  color: #0b2341 !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  text-decoration: none !important;
}
.phi-bound-select__trigger:hover:not(:disabled) {
  border-color: #91a2b8 !important;
}
.phi-bound-select__trigger:focus,
.phi-bound-select__trigger:focus-visible,
.phi-bound-select__trigger[aria-expanded="true"] {
  outline: 3px solid rgba(210, 173, 91, .26) !important;
  outline-offset: 0 !important;
  border-color: #d2ad5b !important;
  box-shadow: none !important;
}
.phi-bound-select__trigger[aria-invalid="true"] {
  border-color: #a4262c !important;
}
.phi-bound-select__trigger:disabled {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  cursor: not-allowed;
  opacity: .72;
}
.phi-bound-select__chevron {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #0b2341;
  border-bottom: 2px solid #0b2341;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}
.phi-bound-select__trigger[aria-expanded="true"] .phi-bound-select__chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}
.phi-bound-select__panel {
  position: fixed;
  z-index: 2147483000;
  width: 100%;
  max-height: var(--phi-bound-select-max-height, 320px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  border: 1px solid #d2ad5b;
  border-radius: 6px;
  padding: 6px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(11, 35, 65, .18);
  scrollbar-color: #0b2341 #edf1f5;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  box-sizing: border-box;
  contain: layout paint;
}
.phi-bound-select__panel[hidden] { display: none !important; }
.phi-bound-select__panel::-webkit-scrollbar { width: 10px; }
.phi-bound-select__panel::-webkit-scrollbar-track { background: #edf1f5; }
.phi-bound-select__panel::-webkit-scrollbar-thumb,
.phi-bound-select__panel::-webkit-scrollbar-thumb:hover,
.phi-bound-select__panel::-webkit-scrollbar-thumb:active {
  background: #0b2341;
  border: 2px solid #edf1f5;
  border-radius: 5px;
}
.phi-bound-select__option {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 4px;
  padding: 9px 12px;
  color: #0b2341;
  background: transparent;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
  font: inherit;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}
/* Auto-only specificity correction. The legacy Auto form globally resets
   .phi-quote-wrap button { padding: 0 }, which otherwise wins over the generic
   option class and compresses the custom list rows. Keep this scoped to Auto. */
.phi-quote-wrap .phi-bound-select__option {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 9px 12px;
  box-sizing: border-box;
  font: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}
.phi-quote-form-page .phi-bound-select__option,
.phi-quote-form-page .phi-bound-select__option:active,
.phi-quote-wrap .phi-bound-select__option,
.phi-quote-wrap .phi-bound-select__option:active {
  color: #0b2341 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.phi-quote-form-page .phi-bound-select__option:hover,
.phi-quote-form-page .phi-bound-select__option:focus,
.phi-quote-form-page .phi-bound-select__option:focus-visible,
.phi-quote-form-page .phi-bound-select__option.is-active,
.phi-quote-wrap .phi-bound-select__option:hover,
.phi-quote-wrap .phi-bound-select__option:focus,
.phi-quote-wrap .phi-bound-select__option:focus-visible,
.phi-quote-wrap .phi-bound-select__option.is-active {
  color: #fff !important;
  background: #1e447b !important;
  background-color: #1e447b !important;
  outline: none !important;
}
.phi-bound-select__option[aria-selected="true"] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 #d2ad5b !important;
}
.phi-bound-select__option:disabled {
  color: #94a3b8 !important;
  background: transparent !important;
  cursor: not-allowed;
  opacity: .75;
}
@media (prefers-reduced-motion: reduce) {
  .phi-bound-select__trigger,
  .phi-bound-select__chevron { transition: none !important; }
}


/* ============================================================================
   AUTO CANONICAL TRUST HEADER + CONFIRMATION EXPERIENCE — v5.49.0
   ============================================================================
   Surgical retrofit only:
   - Adds the same agency trust strip used by Final Expense and Renters.
   - Replaces Auto's compact success card with canonical confirmation sections.
   - Does not alter form fields, validation, vehicle lookup, payload, or submission.
   ============================================================================ */

.phi-auto-quote-shell {
  width: 100%;
  max-width: 1350px;
  margin: 24px auto;
  padding: 0 var(--phi-container-padding-desktop);
  box-sizing: border-box;
}

.phi-auto-quote-shell .phi-quote-wrap {
  --phi-form-max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .phi-auto-quote-shell {
    padding-left: var(--phi-container-padding-tablet);
    padding-right: var(--phi-container-padding-tablet);
  }
}

/* ------------------------------------------------------------
   TRUST STRIP (above card)
   ------------------------------------------------------------ */
.qf-trust-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 20px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--phi-border);
  border-radius: var(--phi-radius-md);
  backdrop-filter: blur(8px);
  box-shadow: var(--phi-shadow-sm);
}

.qf-trust-strip::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--phi-gold) 50%, transparent 100%);
  border-radius: var(--phi-radius-full);
}

.qf-trust-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
}

.qf-trust-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--phi-navy);
  flex-shrink: 0;
  background: var(--phi-cream);
  border-radius: 50%;
}

.qf-trust-strip__text {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}

.qf-trust-strip__item--bbb {
  flex: 0 0 auto;
  justify-content: center;
}

.qf-trust-strip__label {
  font-family: var(--phi-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--phi-charcoal);
  line-height: 1.25;
}

.qf-trust-strip__detail {
  font-family: var(--phi-font-sans);
  font-size: 11px;
  color: var(--phi-gray);
  margin-top: 1px;
  line-height: 1.25;
}

.qf-trust-strip__divider {
  width: 1px;
  height: 32px;
  background: var(--phi-border);
  flex-shrink: 0;
}

.qf-trust-strip__bbb-img {
  display: block;
  height: 36px;
  width: auto;
}

/* Override the legacy centered state-card layout only for successful Auto submissions. */
.phi-quote-wrap .phi-state-success.qf-confirmation {
  display: block;
  align-items: initial;
  text-align: left;
  padding: 48px;
  background: var(--phi-white);
}

.phi-quote-wrap .phi-state-success.qf-confirmation[hidden] {
  display: none !important;
}

.phi-quote-wrap .qf-confirmation__hero {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--phi-gray-200);
  margin-bottom: 32px;
}

.phi-quote-wrap .qf-confirmation__check {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--phi-gold) 0%, #e6c76a 100%);
  color: var(--phi-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.25);
}

.phi-quote-wrap .qf-confirmation__title {
  font-family: var(--phi-font-heading);
  font-size: clamp(28px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--phi-gray-900);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: var(--phi-leading-tight);
}

.phi-quote-wrap .qf-confirmation__subtitle {
  font-family: var(--phi-font-body);
  font-size: 17px;
  color: var(--phi-gray-700);
  margin: 0 0 20px;
}

.phi-quote-wrap .qf-confirmation__reference {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--phi-cream);
  border: 1px solid var(--phi-gray-200);
  border-radius: var(--phi-radius-full);
  padding: 8px 18px;
  margin: 0;
}

.phi-quote-wrap .qf-confirmation__reference-label {
  font-family: var(--phi-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--phi-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.phi-quote-wrap .qf-confirmation__reference-number {
  font-family: var(--phi-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--phi-navy);
  letter-spacing: 0.02em;
}

.phi-quote-wrap .qf-estimate {
  background: var(--phi-cream);
  border: 1px solid var(--phi-gray-200);
  border-left: 4px solid var(--phi-gold);
  border-radius: var(--phi-radius-md);
  padding: 28px 32px;
  margin-bottom: 32px;
}

.phi-quote-wrap .qf-estimate__title {
  font-family: var(--phi-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--phi-gold-deep);
  margin: 0 0 12px;
}

.phi-quote-wrap .qf-estimate__range {
  font-family: var(--phi-font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--phi-gray-900);
  line-height: 1.4;
  margin: 0 0 16px;
}

.phi-quote-wrap .qf-estimate__disclaimer {
  font-family: var(--phi-font-body);
  font-size: 14px;
  color: var(--phi-gray-700);
  line-height: 1.6;
  margin: 0;
}

.phi-quote-wrap .qf-next-steps {
  margin-bottom: 32px;
}

.phi-quote-wrap .qf-next-steps__title,
.phi-quote-wrap .qf-calendar__title {
  font-family: var(--phi-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--phi-gray-900);
  margin: 0 0 20px;
}

.phi-quote-wrap .qf-next-steps__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.phi-quote-wrap .qf-next-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--phi-cream);
  border-radius: var(--phi-radius-md);
}

.phi-quote-wrap .qf-next-steps__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--phi-navy);
  color: var(--phi-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--phi-font-heading);
  font-size: 16px;
  font-weight: 700;
}

.phi-quote-wrap .qf-next-steps__text {
  font-family: var(--phi-font-body);
  font-size: 15px;
  color: var(--phi-gray-900);
  line-height: 1.55;
}

.phi-quote-wrap .qf-next-steps__text strong {
  color: var(--phi-navy);
  font-weight: 600;
}

.phi-quote-wrap .qf-direct-contact {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--phi-gray-200);
}

.phi-quote-wrap .qf-direct-contact__title {
  font-family: var(--phi-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--phi-gray-700);
  margin: 0 0 16px;
}

.phi-quote-wrap a.qf-btn--call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--phi-navy) !important;
  color: var(--phi-white) !important;
  text-decoration: none !important;
  min-height: 56px;
  padding: 0 32px;
  border-radius: var(--phi-radius-md);
  font-weight: 700;
  box-shadow: var(--phi-shadow-md);
}

.phi-quote-wrap a.qf-btn--call:hover {
  background: var(--phi-navy-deep) !important;
  color: var(--phi-white) !important;
  text-decoration: none !important;
}

.phi-quote-wrap a.qf-btn--call svg,
.phi-quote-wrap a.qf-btn--call span {
  color: var(--phi-white) !important;
  stroke: var(--phi-white) !important;
}

.phi-quote-wrap .qf-direct-contact__hours {
  font-family: var(--phi-font-body);
  font-size: 13px;
  color: var(--phi-gray-600);
  margin: 16px 0 0;
  line-height: 1.5;
}

.phi-quote-wrap .qf-calendar {
  margin-bottom: 32px;
}

.phi-quote-wrap .qf-calendar__title {
  text-align: center;
  margin-bottom: 16px;
}

.phi-quote-wrap .qf-calendar__embed {
  background: var(--phi-cream);
  border: 1px solid var(--phi-gray-200);
  border-radius: var(--phi-radius-md);
  overflow: hidden;
  min-height: 400px;
}

.phi-quote-wrap .qf-calendar__embed iframe {
  width: 100%;
  border: none;
  display: block;
  min-height: 600px;
}

.phi-quote-wrap .qf-confirmation__trust {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--phi-gray-200);
}

.phi-quote-wrap .qf-confirmation__bbb-link {
  display: inline-block;
  margin-bottom: 12px;
  transition: opacity var(--phi-transition-base), transform var(--phi-transition-base);
}

.phi-quote-wrap .qf-confirmation__bbb-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.phi-quote-wrap .qf-confirmation__bbb-link img {
  display: block;
  height: 42px;
  width: auto;
}

.phi-quote-wrap .qf-confirmation__trust-text {
  font-family: var(--phi-font-body);
  font-size: 12px;
  color: var(--phi-gray-600);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .phi-auto-quote-shell {
    padding-left: var(--phi-container-padding-mobile);
    padding-right: var(--phi-container-padding-mobile);
  }

  .qf-trust-strip {
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .qf-trust-strip__item {
    gap: 8px;
  }

  .qf-trust-strip__icon {
    width: 24px;
    height: 24px;
  }

  .qf-trust-strip__label {
    font-size: 12px;
  }

  .qf-trust-strip__detail {
    font-size: 10px;
  }

  .qf-trust-strip__divider {
    display: none;
  }

  .qf-trust-strip__bbb-img {
    height: 28px;
  }

  .phi-quote-wrap .phi-state-success.qf-confirmation {
    padding: 32px 24px;
  }

  .phi-quote-wrap .qf-confirmation__check {
    width: 64px;
    height: 64px;
  }

  .phi-quote-wrap .qf-estimate {
    padding: 22px 20px;
  }

  .phi-quote-wrap .qf-estimate__range {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .phi-quote-wrap .phi-state-success.qf-confirmation {
    padding: 28px 20px;
  }

  .phi-quote-wrap .qf-next-steps__item {
    padding: 14px 16px;
  }

  .phi-quote-wrap a.qf-btn--call {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
  }
}