/* AI QUOTE */
/* --- CSS Variables for Dark Theme to Match Screenshot --- */
#quote {
  --bg-color: #3e4157;
  /* Dark slate blue to match your UI */
  --card-color: #ffffff;
  /* Solid white background for cards */
  --text-color-dark: #212529;
  /* Dark text for light cards */
  --text-muted-dark: #6c757d;
  /* Muted dark text */
  --text-color-light: #e0e0e0;
  /* Light grey text for readability */
  --text-muted-light: #b0b2c3;
  /* Muted text for secondary info */
  --primary-color: #4f46e5;
  /* Indigo for primary actions */
  --primary-hover-color: #4338ca;
  --accent-gradient-1: #34d399;
  /* Green for total price */
  --accent-gradient-2: #10b981;
  --border-color: #dee2e6;
  /* Light border for light cards */
  --font-family: 'Inter', sans-serif;
  --border-radius: 12px;
  --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* --- Main Quote Container --- */
#quote {
  font-family: var(--font-family) !important;
  background-color: #ffffff !important;
  background-image: none !important;
  /* Removes any old gradients */
  max-width: 550px !important;
  margin: 40px auto !important;
  padding: 32px !important;
  border-radius: var(--border-radius) !important;

  /* Adds a new, soft shadow with a hint of blue */
  box-shadow: 0 10px 40px rgba(74, 85, 162, 0.15) !important;
  /* Adds a very subtle border for a clean edge */
  border: 1px solid rgba(0, 0, 0, 0.05) !important;

  display: none;
  flex-direction: column !important;
  gap: 24px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  font-family: 'Inter', sans-serif !important;

  overflow: hidden !important;
  /* Important for the corner blobs */
  position: relative !important;
  /* Required for pseudo-elements */
}

/* --- Decorative Corner Blobs --- */
/* These create the soft, blurred gradient effect in the corners */
#quote::before,
#quote::after {
  content: '' !important;
  position: absolute !important;
  border-radius: 50% !important;
  opacity: 0.5 !important;
  filter: blur(60px) !important;
  z-index: 0 !important;
  /* Places them behind the content */
}

/* Top-left blob */
#quote::before {
  background-color: #d1e5f8 !important;
  /* Lighter blue */
  width: 200px !important;
  height: 200px !important;
  top: -50px !important;
  left: -50px !important;
}

/* Bottom-right blob */
#quote::after {
  background-color: #c2d9ff !important;
  width: 250px !important;
  height: 250px !important;
  bottom: -80px !important;
  right: -80px !important;
}

/* --- Ensure Content is Above Blobs --- */
/* You may need a wrapper for your content inside the #quote container */
#quote>* {
  position: relative;
  z-index: 1;
}

/* Media query should be outside the selector */
@media (max-width: 600px) {
  #quote {
    max-width: 95vw !important;
    padding: 16px !important;
  }
}


/* --- Reusable Card Component --- */
#quote .card {
  background-color: var(--card-color) !important;
  padding: 24px !important;
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--border-color) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* --- Typography & Gradients --- */
#quote .card h3,
#quote .card h4,
#quote .card p {
  color: var(--text-color-dark) !important;
  font-family: 'Inter', sans-serif !important;
}

#quote .details-generated {
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#quote .card .confidence-level,
#quote .card .based-results {
  color: var(--text-muted-dark) !important;
  font-family: 'Inter', sans-serif !important;

}

#quote .selected-prices {
  font-size: 22px !important;
  font-weight: 700 !important;
}

#quote .gradient-text-blue {
  background: linear-gradient(90deg, #60a5fa, #3b82f6) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: 'Inter', sans-serif !important;
}

#quote .gradient-text-purple {
  color: rgb(62, 62, 62) !important;
  font-family: 'Inter', sans-serif !important;
  text-align: left !important;

}

#quote p {
  margin: 0 !important;
  line-height: 1.6 !important;
}

#quote .card a {
  color: var(--primary-color) !important;
}

#quote .card a:hover {
  color: var(--primary-hover-color) !important;
}

/* --- Header & Icons --- */
#quote .header {
  text-align: center !important;
}

#quote .card .header h3,
#quote .card .header p {
  color: var(--text-color-dark) !important;
  /* Override for headers inside cards */
}

#quote #quote-icon {
  width: 100px !important;
  height: 100px !important;
  margin: 0 auto 16px !important;
  animation: coin-flip 1s ease-out;
}

#quote #loading-image-3 {
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  margin: 20px auto 0 !important;
  margin-bottom: 20px !important;
}

/* --- Pricing Section --- */
#quote .price-item,
#quote .price-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 16px !important;
}

#quote .quote-language-pair-item {
  align-items: center !important;
  gap: 12px !important;
}

#quote .quote-language-pair {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

#quote .quote-language-pill {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #dbe4ee !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  padding: 3px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

#quote .quote-language-pill-target {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

#quote .quote-language-arrow {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

#quote .card .price-item p:first-child {
  color: var(--text-muted-dark) !important;
}

#quote .price-item.price-fine-print {
  align-items: flex-start !important;
  margin-top: -4px !important;
}

#quote .price-item.price-fine-print p {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  opacity: 0.72 !important;
  line-height: 1.25 !important;
}

#quote .italian-court-stamp-notice,
.payment-section .italian-court-stamp-notice {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 10px 0 14px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #fbbf24 !important;
  border-left: 5px solid #d97706 !important;
  background: #fffbeb !important;
  color: #78350f !important;
  box-shadow: 0 8px 18px rgba(146, 64, 14, 0.12) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

#quote .italian-court-stamp-notice {
  margin-top: -2px !important;
}

#quote .card .quote-edit-wrap,
.payment-section .quote-edit-wrap {
  margin: 6px 0 12px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#quote .card .quote-edit-wrap[data-open="true"],
.payment-section .quote-edit-wrap[data-open="true"] {
  padding-top: 14px !important;
  border-top: 1px solid #dbeafe !important;
}

#quote .quote-edit-actions,
.payment-section .quote-edit-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

#quote .quote-edit-toggle-btn,
.payment-section .quote-edit-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-height: 32px !important;
  padding: 6px 11px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

#quote .quote-edit-toggle-btn:hover,
.payment-section .quote-edit-toggle-btn:hover {
  background: #f8fafc !important;
  color: #1e293b !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

#quote .quote-edit-fine-print,
.payment-section .quote-edit-fine-print {
  margin: 0 !important;
  max-width: 34rem !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}

#quote .quote-edit-evaluation-panel,
.payment-section .quote-edit-evaluation-panel {
  padding: 10px 12px !important;
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
}

#quote .quote-edit-evaluation-heading,
.payment-section .quote-edit-evaluation-heading {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#quote .quote-edit-evaluation-intro,
.payment-section .quote-edit-evaluation-intro {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

#quote .quote-edit-evaluation-summary,
.payment-section .quote-edit-evaluation-summary {
  display: block !important;
  max-width: 42rem !important;
  margin: 0 !important;
}

#quote .quote-edit-evaluation-toggle,
.payment-section .quote-edit-evaluation-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 9px 0 0 !important;
  padding: 8px 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

#quote .quote-edit-evaluation-toggle span,
.payment-section .quote-edit-evaluation-toggle span {
  color: #334155 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#quote .quote-edit-evaluation-note,
.payment-section .quote-edit-evaluation-note {
  margin: 12px 0 0 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-size: 0.72rem !important;
  line-height: 1.55 !important;
}

#quote .quote-edit-evaluation-note a,
.payment-section .quote-edit-evaluation-note a {
  color: #0f4c81 !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.14em !important;
}

#quote details.quote-edit-evaluation-guide,
.payment-section details.quote-edit-evaluation-guide {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid #dbe4ee !important;
  border: 1px solid #dbe4ee !important;
  border-radius: 7px !important;
  background: #fcfdff !important;
  overflow: hidden !important;
}

#quote details.quote-edit-dtp-guide,
#quote details.quote-edit-sworn-guide,
.payment-section details.quote-edit-dtp-guide,
.payment-section details.quote-edit-sworn-guide {
  border-bottom: 1px solid #dbe4ee !important;
  box-shadow: inset 0 -1px 0 #dbe4ee !important;
}

#quote details.quote-edit-evaluation-guide>summary,
.payment-section details.quote-edit-evaluation-guide>summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  cursor: pointer !important;
  list-style: none !important;
  color: #334155 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

#quote details.quote-edit-evaluation-guide>summary::-webkit-details-marker,
.payment-section details.quote-edit-evaluation-guide>summary::-webkit-details-marker {
  display: none !important;
}

#quote details.quote-edit-evaluation-guide>summary::after,
.payment-section details.quote-edit-evaluation-guide>summary::after {
  content: '+' !important;
  color: #64748b !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#quote details.quote-edit-evaluation-guide[open],
.payment-section details.quote-edit-evaluation-guide[open] {
  padding-bottom: 0 !important;
}

#quote details.quote-edit-evaluation-guide[open]>summary,
.payment-section details.quote-edit-evaluation-guide[open]>summary {
  border-bottom: 1px solid #e2e8f0 !important;
}

#quote details.quote-edit-evaluation-guide[open]>summary::after,
.payment-section details.quote-edit-evaluation-guide[open]>summary::after {
  content: '−' !important;
}

#quote .quote-edit-evaluation-guide-body,
.payment-section .quote-edit-evaluation-guide-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 6px 9px 8px !important;
  color: #64748b !important;
  font-size: 0.68rem !important;
  line-height: 1.45 !important;
}

#quote .quote-edit-evaluation-guide-body p,
.payment-section .quote-edit-evaluation-guide-body p {
  margin: 0 !important;
}

#quote .quote-edit-evaluation-guide-body strong,
.payment-section .quote-edit-evaluation-guide-body strong {
  color: #0f172a !important;
  font-weight: 600 !important;
}

#quote .quote-edit-panel,
.payment-section .quote-edit-panel {
  display: block !important;
}

#quote .quote-edit-panel[hidden],
.payment-section .quote-edit-panel[hidden],
#quote .quote-edit-breakdown-preview[hidden],
.payment-section .quote-edit-breakdown-preview[hidden],
#quote .quote-edit-row[style*="display: none"],
.payment-section .quote-edit-row[style*="display: none"],
#quote .quote-edit-row[style*="display:none"],
.payment-section .quote-edit-row[style*="display:none"],
#quote .quote-edit-field[style*="display: none"],
.payment-section .quote-edit-field[style*="display: none"],
#quote .quote-edit-field[style*="display:none"],
.payment-section .quote-edit-field[style*="display:none"] {
  display: none !important;
}

#quote .quote-edit-panel-stack,
.payment-section .quote-edit-panel-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#quote .quote-edit-panel-stack[hidden],
.payment-section .quote-edit-panel-stack[hidden],
#quote .quote-edit-shipping-fields[hidden],
.payment-section .quote-edit-shipping-fields[hidden] {
  display: none !important;
}

#quote .quote-edit-row,
.payment-section .quote-edit-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}

#quote .quote-edit-slot,
.payment-section .quote-edit-slot {
  display: contents !important;
}

#quote .quote-edit-apostille-count-row,
.payment-section .quote-edit-apostille-count-row {
  grid-template-columns: minmax(0, 240px) !important;
  margin-top: -2px !important;
}

#quote .quote-edit-country-row,
.payment-section .quote-edit-country-row {
  grid-template-columns: minmax(0, 260px) !important;
}

#quote .quote-edit-language-row,
.payment-section .quote-edit-language-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: end !important;
}

#quote .quote-edit-language-arrow,
.payment-section .quote-edit-language-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-bottom: 12px !important;
  color: #94a3b8 !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

#quote .quote-edit-field,
.payment-section .quote-edit-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  max-width: none !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

#quote .quote-edit-field>span,
.payment-section .quote-edit-field>span {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

#quote .quote-edit-business-section .translator-preference-grid,
.payment-section .quote-edit-business-section .translator-preference-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#quote .quote-edit-business-section .translator-option,
.payment-section .quote-edit-business-section .translator-option {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

#quote .quote-edit-business-section .translator-option input.quote-edit-checkbox,
.payment-section .quote-edit-business-section .translator-option input.quote-edit-checkbox {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
}

#quote .quote-edit-business-section .translator-option-content,
.payment-section .quote-edit-business-section .translator-option-content {
  min-width: 0 !important;
}

#quote .quote-edit-business-section .translator-option-title,
.payment-section .quote-edit-business-section .translator-option-title {
  font-size: 0.92rem !important;
}

#quote .quote-edit-business-section .translator-option-subtitle,
.payment-section .quote-edit-business-section .translator-option-subtitle {
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
}

#quote .quote-edit-business-section .translator-option-desc,
.payment-section .quote-edit-business-section .translator-option-desc {
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#quote .quote-edit-notes-field,
.payment-section .quote-edit-notes-field {
  margin-top: 14px !important;
}

#quote .quote-edit-field input:not(.quote-edit-checkbox),
#quote .quote-edit-field select,
.payment-section .quote-edit-field input:not(.quote-edit-checkbox),
.payment-section .quote-edit-field select {
  width: 100% !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#quote .quote-edit-field input:not(.quote-edit-checkbox):focus,
#quote .quote-edit-field select:focus,
.payment-section .quote-edit-field input:not(.quote-edit-checkbox):focus,
.payment-section .quote-edit-field select:focus {
  border-color: #93c5fd !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.22) !important;
  transform: none !important;
}

#quote .quote-edit-field textarea,
.payment-section .quote-edit-field textarea {
  width: 100% !important;
  min-height: 80px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

#quote .quote-edit-field textarea::placeholder,
.payment-section .quote-edit-field textarea::placeholder {
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
  color: #94a3b8 !important;
}

#quote .quote-edit-field textarea:focus,
.payment-section .quote-edit-field textarea:focus {
  border-color: #93c5fd !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.22) !important;
}

#quote .quote-edit-checkbox-row,
.payment-section .quote-edit-checkbox-row {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

#quote .quote-edit-apostille-expedite,
.payment-section .quote-edit-apostille-expedite {
  grid-column: 1 / -1 !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: -2px !important;
  padding: 2px 0 0 !important;
}

#quote .quote-edit-apostille-expedite-copy,
.payment-section .quote-edit-apostille-expedite-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#quote .quote-edit-apostille-expedite-title,
.payment-section .quote-edit-apostille-expedite-title {
  color: #0f172a !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

#quote .quote-edit-apostille-expedite-note,
.payment-section .quote-edit-apostille-expedite-note {
  color: #64748b !important;
  font-size: 0.72rem !important;
  line-height: 1.38 !important;
}

#quote .quote-edit-apostille-info,
.payment-section .quote-edit-apostille-info {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.98)) !important;
}

#quote .quote-edit-apostille-info[hidden],
.payment-section .quote-edit-apostille-info[hidden] {
  display: none !important;
}

#quote .quote-edit-apostille-info-copy,
.payment-section .quote-edit-apostille-info-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#quote .quote-edit-apostille-info-copy strong,
.payment-section .quote-edit-apostille-info-copy strong {
  color: #1e3a8a !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

#quote .quote-edit-apostille-info-copy p,
.payment-section .quote-edit-apostille-info-copy p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 0.74rem !important;
  line-height: 1.42 !important;
}

#quote .quote-edit-apostille-info-close,
.payment-section .quote-edit-apostille-info-close {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1d4ed8 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#quote .quote-edit-input-note,
.payment-section .quote-edit-input-note {
  color: #64748b !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

#quote .quote-edit-shipping-wrap,
.payment-section .quote-edit-shipping-wrap {
  padding: 14px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.96)) !important;
}

#quote .quote-edit-shipping-header,
.payment-section .quote-edit-shipping-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#quote .quote-edit-shipping-label,
.payment-section .quote-edit-shipping-label {
  display: inline-block !important;
  margin: 0 0 4px !important;
  color: #0f172a !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

#quote .quote-edit-shipping-summary,
.payment-section .quote-edit-shipping-summary {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 0.76rem !important;
  line-height: 1.45 !important;
}

#quote .quote-edit-shipping-toggle,
.payment-section .quote-edit-shipping-toggle {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1d4ed8 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

#quote .quote-edit-shipping-toggle:hover,
.payment-section .quote-edit-shipping-toggle:hover {
  border-color: #93c5fd !important;
  background: #eff6ff !important;
  color: #1e40af !important;
}

#quote .quote-edit-preview-wrap,
.payment-section .quote-edit-preview-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
}

#quote .card .quote-edit-preview,
.payment-section .quote-edit-preview {
  margin: 0 !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: #475569 !important;
}

#quote .card .quote-edit-preview.quote-edit-preview-rich,
.payment-section .quote-edit-preview.quote-edit-preview-rich {
  --quote-edit-preview-border: #bbf7d0 !important;
  --quote-edit-preview-bg-top: rgba(240, 253, 244, 0.98) !important;
  --quote-edit-preview-bg-bottom: rgba(255, 255, 255, 0.98) !important;
  --quote-edit-preview-accent: #047857 !important;
  --quote-edit-preview-total-color: #065f46 !important;
  --quote-edit-preview-muted: #64748b !important;
  --quote-edit-preview-discount-color: #166534 !important;
  --quote-edit-preview-chip-bg: rgba(187, 247, 208, 0.65) !important;
  --quote-edit-preview-chip-color: #065f46 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--quote-edit-preview-border) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, var(--quote-edit-preview-bg-top), var(--quote-edit-preview-bg-bottom)) !important;
}

#quote .card .quote-edit-preview.quote-edit-preview-rich[data-speed="priority"],
.payment-section .quote-edit-preview.quote-edit-preview-rich[data-speed="priority"] {
  --quote-edit-preview-border: #bfdbfe !important;
  --quote-edit-preview-bg-top: rgba(239, 246, 255, 0.98) !important;
  --quote-edit-preview-bg-bottom: rgba(255, 255, 255, 0.98) !important;
  --quote-edit-preview-accent: #1d4ed8 !important;
  --quote-edit-preview-total-color: #1e3a8a !important;
  --quote-edit-preview-muted: #475569 !important;
  --quote-edit-preview-discount-color: #1e40af !important;
  --quote-edit-preview-chip-bg: rgba(191, 219, 254, 0.7) !important;
  --quote-edit-preview-chip-color: #1e3a8a !important;
}

#quote .card .quote-edit-preview.quote-edit-preview-rich[data-speed="express"],
.payment-section .quote-edit-preview.quote-edit-preview-rich[data-speed="express"] {
  --quote-edit-preview-border: #fed7aa !important;
  --quote-edit-preview-bg-top: rgba(255, 247, 237, 0.98) !important;
  --quote-edit-preview-bg-bottom: rgba(255, 255, 255, 0.98) !important;
  --quote-edit-preview-accent: #c2410c !important;
  --quote-edit-preview-total-color: #9a3412 !important;
  --quote-edit-preview-muted: #7c2d12 !important;
  --quote-edit-preview-discount-color: #c2410c !important;
  --quote-edit-preview-chip-bg: rgba(254, 215, 170, 0.72) !important;
  --quote-edit-preview-chip-color: #9a3412 !important;
}

#quote .card .quote-edit-preview.quote-edit-preview-rich[data-speed="urgent"],
.payment-section .quote-edit-preview.quote-edit-preview-rich[data-speed="urgent"] {
  --quote-edit-preview-border: #fecaca !important;
  --quote-edit-preview-bg-top: rgba(254, 242, 242, 0.98) !important;
  --quote-edit-preview-bg-bottom: rgba(255, 255, 255, 0.98) !important;
  --quote-edit-preview-accent: #b91c1c !important;
  --quote-edit-preview-total-color: #991b1b !important;
  --quote-edit-preview-muted: #7f1d1d !important;
  --quote-edit-preview-discount-color: #b91c1c !important;
  --quote-edit-preview-chip-bg: rgba(254, 202, 202, 0.78) !important;
  --quote-edit-preview-chip-color: #991b1b !important;
}

#quote .quote-edit-preview-text,
.payment-section .quote-edit-preview-text {
  display: block !important;
}

#quote .quote-edit-preview-eyebrow,
.payment-section .quote-edit-preview-eyebrow {
  color: var(--quote-edit-preview-accent) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#quote .quote-edit-preview-main,
.payment-section .quote-edit-preview-main {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#quote .quote-edit-preview-total,
.payment-section .quote-edit-preview-total {
  color: var(--quote-edit-preview-total-color) !important;
  font-size: 1.36rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

#quote .quote-edit-preview-meta,
.payment-section .quote-edit-preview-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#quote .quote-edit-preview-service,
.payment-section .quote-edit-preview-service {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--quote-edit-preview-chip-bg) !important;
  color: var(--quote-edit-preview-chip-color) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#quote .quote-edit-preview-turnaround,
.payment-section .quote-edit-preview-turnaround {
  color: var(--quote-edit-preview-total-color) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#quote .quote-edit-preview-original,
.payment-section .quote-edit-preview-original {
  color: #64748b !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
}

#quote .quote-edit-preview-discount,
.payment-section .quote-edit-preview-discount {
  color: var(--quote-edit-preview-discount-color) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#quote .quote-edit-preview-subtext,
.payment-section .quote-edit-preview-subtext {
  color: var(--quote-edit-preview-muted) !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

#quote .quote-edit-preview-fine-print,
.payment-section .quote-edit-preview-fine-print {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#quote .quote-edit-preview-fine-print-link,
.payment-section .quote-edit-preview-fine-print-link {
  width: fit-content !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--quote-edit-preview-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  cursor: pointer !important;
}

#quote .quote-edit-preview-fine-print-link:hover,
.payment-section .quote-edit-preview-fine-print-link:hover,
#quote .quote-edit-preview-fine-print-link:focus-visible,
.payment-section .quote-edit-preview-fine-print-link:focus-visible {
  color: var(--quote-edit-preview-accent) !important;
}

#quote .quote-edit-preview-fine-print-terms,
.payment-section .quote-edit-preview-fine-print-terms {
  display: block !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: max-height 180ms ease, opacity 180ms ease, transform 180ms ease !important;
  color: var(--quote-edit-preview-muted) !important;
  font-size: 0.68rem !important;
  line-height: 1.45 !important;
}

#quote .quote-edit-preview-fine-print-terms.is-open,
.payment-section .quote-edit-preview-fine-print-terms.is-open {
  max-height: 140px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#quote .card .quote-edit-preview[data-kind="pending"],
.payment-section .quote-edit-preview[data-kind="pending"] {
  color: #1d4ed8 !important;
}

#quote .card .quote-edit-preview[data-kind="success"],
.payment-section .quote-edit-preview[data-kind="success"] {
  color: #166534 !important;
}

#quote .card .quote-edit-preview[data-kind="warning"],
.payment-section .quote-edit-preview[data-kind="warning"] {
  color: #b45309 !important;
}

#quote .quote-edit-breakdown-preview,
.payment-section .quote-edit-breakdown-preview {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#quote .quote-edit-breakdown-row,
.payment-section .quote-edit-breakdown-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

#quote .quote-edit-breakdown-row span:last-child,
.payment-section .quote-edit-breakdown-row span:last-child {
  text-align: right !important;
  font-weight: 600 !important;
}

#quote .quote-edit-breakdown-row[data-tone="fine"],
.payment-section .quote-edit-breakdown-row[data-tone="fine"] {
  color: #64748b !important;
  font-size: 0.76rem !important;
}

#quote .quote-edit-breakdown-row[data-tone="total"],
.payment-section .quote-edit-breakdown-row[data-tone="total"] {
  padding-top: 8px !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

#quote .quote-edit-collapsible,
.payment-section .quote-edit-collapsible {
  margin: 0 !important;
  max-width: none !important;
  border: 1px solid #dbeafe !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

#quote .quote-edit-business-section,
.payment-section .quote-edit-business-section {
  margin: 12px 0 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

#quote .quote-edit-expedite-hint,
.payment-section .quote-edit-expedite-hint {
  margin-top: 4px !important;
  padding: 8px 10px !important;
  border: 1px solid #bfdbfe !important;
  border-left: 3px solid #3b82f6 !important;
  border-radius: 10px !important;
  background: #eff6ff !important;
  color: #1e40af !important;
  font-size: 0.75rem !important;
  line-height: 1.45 !important;
}

#quote .quote-edit-collapsible summary,
.payment-section .quote-edit-collapsible summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  list-style: none !important;
  color: #0f172a !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}

#quote .quote-edit-collapsible summary::-webkit-details-marker,
.payment-section .quote-edit-collapsible summary::-webkit-details-marker {
  display: none !important;
}

#quote input.quote-edit-checkbox,
.payment-section input.quote-edit-checkbox {
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  appearance: auto !important;
  accent-color: #2563eb !important;
}

#quote .quote-edit-actions-row,
.payment-section .quote-edit-actions-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

@media (max-width: 720px) {

  #quote .quote-edit-language-row,
  .payment-section .quote-edit-language-row {
    grid-template-columns: 1fr !important;
  }

  #quote .quote-edit-language-arrow,
  .payment-section .quote-edit-language-arrow {
    display: none !important;
  }

  #quote .quote-edit-country-row,
  .payment-section .quote-edit-country-row {
    grid-template-columns: 1fr !important;
  }

  #quote .quote-edit-shipping-header,
  .payment-section .quote-edit-shipping-header {
    flex-direction: column !important;
  }

  #quote .quote-edit-shipping-toggle,
  .payment-section .quote-edit-shipping-toggle {
    width: 100% !important;
  }

  #quote .quote-edit-apostille-info,
  .payment-section .quote-edit-apostille-info {
    flex-direction: column !important;
  }

  #quote .quote-edit-apostille-info-close,
  .payment-section .quote-edit-apostille-info-close {
    align-self: flex-start !important;
  }
}

#quote .technical-pricing-notice,
.payment-section .technical-pricing-notice {
  display: block !important;
  margin: 10px 0 2px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(14, 116, 144, 0.18) !important;
  background: linear-gradient(135deg, rgba(240, 249, 255, 0.98), rgba(236, 254, 255, 0.95)) !important;
  box-shadow: 0 10px 24px rgba(14, 116, 144, 0.08) !important;
}

#quote .technical-pricing-notice-title,
.payment-section .technical-pricing-notice-title {
  margin: 0 0 6px !important;
  color: #0f172a !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

#quote .technical-pricing-notice-text,
.payment-section .technical-pricing-notice-text {
  margin: 0 !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

#quote .price-divider {
  border: 0 !important;
  height: 1px !important;
  background-color: var(--border-color) !important;
  margin: 8px 0 !important;
}

#quote .price-total {
  margin-top: 8px !important;
}

#quote #total-with-notary {
  font-size: 24px !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, var(--accent-gradient-1), var(--accent-gradient-2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* --- Details & Summary (Accordion) --- */
#quote .card details {
  border-bottom: 1px solid var(--border-color) !important;
  margin-bottom: unset !important;
}

#quote .card summary {
  color: var(--text-color-dark) !important;
}

#quote .card summary svg {
  color: var(--text-muted-dark) !important;
}

#quote .card .details-content {
  color: var(--text-muted-dark) !important;
  text-align: left !important;
}

#quote .details-content ol,
#quote .details-content ul,
#quote .details-content ul li,
#quote .details-content ol li {
  color: var(--text-color-dark) !important;
  text-align: left !important;
}

#quote .details-content h4 {
  font-weight: 600 !important;
}

/* --- Loyalty styles --- */
#quote #quote-loyalty-container {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #f8fbff, #f1f5ff) !important;
  border: 1px solid rgba(79, 70, 229, 0.12) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.08) !important;
}

#quote #quote-loyalty-container>p {
  margin: 0 !important;
  font-weight: 600 !important;
  color: #2b2f3a !important;
}

#quote .loyalty-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1px dashed rgba(79, 70, 229, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  color: var(--text-color-dark) !important;
}

#quote .loyalty-content select,
#quote .loyalty-content button,
.loyalty-section select,
.loyalty-section button {
  width: 100% !important;
}

#quote .loyalty-content select,
.loyalty-section select {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(43, 47, 58, 0.12) !important;
  background: #f8fafc !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

#quote .loyalty-content button,
.loyalty-section button {
  border: none !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

#quote .loyalty-content button:hover,
.loyalty-section button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.3) !important;
}

#quote .loyalty-content button:disabled,
.loyalty-section button:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

#quote .loyalty-balance,
.loyalty-section .loyalty-balance {
  font-weight: 800 !important;
  color: #111827 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#quote .loyalty-balance::before,
.loyalty-section .loyalty-balance::before {
  content: '\2605';
  color: #f59e0b !important;
  font-size: 16px !important;
}

#quote .loyalty-applied,
.loyalty-section .loyalty-applied {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #065f46 !important;
  border: 1px solid rgba(16, 185, 129, 0.18) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 700 !important;
}

.loyalty-section {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #f9fafb, #eef2ff) !important;
  border: 1px solid rgba(79, 70, 229, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.loyalty-section .text-muted,
#quote .loyalty-content .text-muted {
  color: #6b7280 !important;
}

/* --- Buttons --- */
#quote .btn {
  width: 100% !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

#quote .btn-primary {
  background-color: #0093E9;
  color: white !important;
}

#quote .btn-primary:hover {
  background-color: #007bbd;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#quote .btn-secondary {
  background-color: #ffffff !important;
  color: #343a40 !important;
  border: 1px solid #dee2e6 !important;
}

#quote .btn-secondary:hover {
  background-color: #f8f9fa !important;
}

#quote .rep-image {
  width: 50px !important;
  height: 40px !important;
  vertical-align: middle !important;
  border-radius: 4px !important;
}

/* --- Form Elements --- */
#quote .card textarea {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: var(--text-color-dark) !important;
  font-family: var(--font-family) !important;
  resize: vertical !important;
}

#quote .card textarea:focus {
  outline: none !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px var(--primary-color) !important;
}

/* --- General Styles from previous versions --- */
#quote details {
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 16px !important;
}

#quote details:last-of-type {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#quote details.quote-edit-collapsible:last-of-type,
#quote details.quote-edit-business-section:last-of-type,
#quote details.quote-edit-evaluation-guide:last-of-type,
#quote details.quote-edit-dtp-guide:last-of-type,
#quote details.quote-edit-sworn-guide:last-of-type {
  border-bottom: 1px solid var(--border-color) !important;
  padding-bottom: 16px !important;
}

#quote summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  list-style: none !important;
}

#quote summary::-webkit-details-marker {
  display: none !important;
}

#quote summary svg {
  transition: transform 0.2s ease-in-out;
}

#quote details[open]>summary svg {
  transform: rotate(90deg);
}

#quote .details-content {
  padding-top: 16px !important;
  font-size: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#quote ol,
#quote ul {
  padding-left: 20px !important;
  margin: 0 !important;
}

/* --- Utility & Helper Classes --- */
#quote .hidden {
  display: none !important;
}

#quote .text-center {
  text-align: center !important;
}

#quote .text-muted {
  color: var(--text-muted-light) !important;
  font-size: 14px !important;
}

#quote .payment-methods {
  max-width: 300px !important;
  margin: 0 auto !important;
  border-radius: 8px !important;

}

/* --- Animations --- */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

#quote [data-quote-edit-speed-chooser="true"].quote-speed-chooser-enter {
  animation: quoteSpeedChooserReveal 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top center;
  will-change: opacity, transform, box-shadow;
}

@keyframes quoteSpeedChooserReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    box-shadow: 0 0 0 rgba(15, 23, 42, 0);
  }

  65% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
    box-shadow: 0 10px 18px rgba(29, 78, 216, 0.08);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  #quote [data-quote-edit-speed-chooser="true"].quote-speed-chooser-enter {
    animation: none;
  }
}

#quote .animate-in {
  animation: fadeInSlideUp 0.6s ease-out;
}

@keyframes coin-flip {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

#quote .animate-out {
  animation: fadeOutSlideDown 0.6s ease-out;
}

#loading-state.animate-out {
  animation: fadeOutSlideDown 0.6s ease-out;
}

@keyframes fadeOutSlideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Modern Loading State */
#loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  min-height: 200px;
  transition: all 0.3s ease;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Subtle animated background gradient */
#loading-state::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(59, 130, 246, 0.1),
      transparent);
  animation: shimmer 2s infinite;
  z-index: 1;
}

/* Loading image styling */
#loading-state #loading-image-3 {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 24px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(59, 130, 246, 0.2) !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
  position: relative;
  z-index: 2;
  animation: pulse 2s infinite ease-in-out;
}

/* Modern text styling */
#loading-state .moment-text {
  color: #475569 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  text-align: center !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  position: relative;
  z-index: 2;

  /* Subtle text animation */
  background: linear-gradient(135deg, #475569 0%, #64748b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Add subtle dots animation */
#loading-state .moment-text::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3b82f6;
  margin-left: 4px;
  animation: dots 1.5s infinite;
}

/* Hover effect for interactivity */
#loading-state:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.05);
}

#loading-state.instant-quote-processing {
  align-items: stretch;
  padding: 0;
  background: #ffffff;
  border: 1px solid #dbeafe;
  box-shadow: 0 18px 40px rgba(30, 64, 175, 0.14);
}

#loading-state.instant-quote-processing:hover {
  transform: none;
}

#loading-state.instant-quote-processing::before {
  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.12), transparent);
}

#loading-state .instant-quote-processing-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 24px;
}

#loading-state .instant-quote-processing-header {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

#loading-state .instant-quote-processing-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
  border: 1px solid #bfdbfe;
}

#loading-state .instant-quote-processing-visual #loading-image-3 {
  position: relative;
  z-index: 3;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18) !important;
  animation: quoteProcessingBreath 2.2s infinite ease-in-out;
}

#loading-state .instant-quote-processing-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  inset: 10px;
}

#loading-state .instant-quote-processing-orbit-outer {
  animation: quoteProcessingSpin 3.8s linear infinite;
}

#loading-state .instant-quote-processing-orbit-inner {
  inset: 20px;
  border-color: rgba(16, 185, 129, 0.36);
  animation: quoteProcessingSpin 2.6s linear infinite reverse;
}

#loading-state .instant-quote-processing-orbit::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2563eb;
  transform: translateX(-50%);
}

#loading-state .instant-quote-processing-copy {
  min-width: 0;
  text-align: left;
}

#loading-state .instant-quote-processing-eyebrow {
  margin: 0 0 4px !important;
  color: #2563eb !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

#loading-state .instant-quote-processing-title {
  margin: 0 0 7px;
  color: #0f172a;
  font-size: 1.22rem;
  line-height: 1.25;
}

#loading-state.instant-quote-processing .moment-text {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}

#loading-state.instant-quote-processing .moment-text::after {
  display: none;
}

#loading-state .instant-quote-processing-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#loading-state .instant-quote-processing-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
}

#loading-state .instant-quote-processing-progress-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

#loading-state .instant-quote-processing-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  min-width: 28px;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #06b6d4, #10b981);
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.28);
  transition: width 0.45s ease;
}

#loading-state .instant-quote-processing-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: quoteProcessingSweep 1.7s infinite;
}

#loading-state .instant-quote-processing-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#loading-state .instant-quote-processing-stat {
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

#loading-state .instant-quote-processing-stat strong,
#loading-state .instant-quote-processing-stat span {
  display: block;
}

#loading-state .instant-quote-processing-stat strong {
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 0.95rem;
  line-height: 1.25;
}

#loading-state .instant-quote-processing-stat span {
  margin-top: 4px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

#loading-state .instant-quote-processing-elapsed-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

#loading-state .instant-quote-processing-elapsed-row span {
  flex: 0 0 auto;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
}

#loading-state .instant-quote-processing-elapsed-row strong {
  min-width: 0;
  color: #1e3a8a;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}

#loading-state .instant-quote-processing-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#loading-state .instant-quote-processing-step {
  position: relative;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

#loading-state .instant-quote-processing-step::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cbd5e1;
  transform: translateY(-50%);
}

#loading-state .instant-quote-processing-step.active {
  background: #ecfdf5;
  color: #047857;
}

#loading-state .instant-quote-processing-step.active::before {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}

/* Enhanced version with progress indicator */
#loading-state.with-progress::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 0 0 16px 16px;
  animation: progress 3s infinite ease-in-out;
}

/* Responsive design */
@media (max-width: 768px) {
  #loading-state {
    padding: 32px 20px;
    min-height: 180px;
    border-radius: 12px;
  }

  #loading-state #loading-image-3 {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 20px !important;
  }

  #loading-state .moment-text {
    font-size: 16px !important;
  }

  #loading-state.instant-quote-processing {
    padding: 0;
  }

  #loading-state .instant-quote-processing-card {
    padding: 20px;
  }

  #loading-state .instant-quote-processing-header {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
  }

  #loading-state .instant-quote-processing-visual {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  #loading-state .instant-quote-processing-visual #loading-image-3 {
    width: 40px !important;
    height: 40px !important;
  }

  #loading-state .instant-quote-processing-stats,
  #loading-state .instant-quote-processing-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #loading-state {
    padding: 24px 16px;
    min-height: 160px;
    border-radius: 10px;
  }

  #loading-state #loading-image-3 {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 16px !important;
  }

  #loading-state .moment-text {
    font-size: 15px !important;
  }

  #loading-state.instant-quote-processing {
    padding: 0;
  }

  #loading-state .instant-quote-processing-card {
    padding: 16px;
  }

  #loading-state .instant-quote-processing-header {
    grid-template-columns: 1fr;
    text-align: center;
  }

  #loading-state .instant-quote-processing-copy,
  #loading-state.instant-quote-processing .moment-text {
    text-align: center !important;
  }

  #loading-state .instant-quote-processing-visual {
    margin: 0 auto;
  }
}

/* Animations */
@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
  }
}

@keyframes dots {

  0%,
  20% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes progress {
  0% {
    width: 0%;
  }

  50% {
    width: 70%;
  }

  100% {
    width: 100%;
  }
}

@keyframes quoteProcessingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes quoteProcessingBreath {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes quoteProcessingSweep {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* Discount Highlighting */
#quote .card .discount-highlight {
  background-color: #e6f7ec !important;
  padding: 8px 12px !important;
  margin: 4px -12px !important;
  border-radius: 8px !important;
}

#quote .card #discount-item p:last-child,
#quote .card #flat-discount-item p:last-child {
  color: #155724 !important;
  font-weight: 700 !important;
}

#quote .card #final-price {
  font-size: 24px !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #34d399, #10b981) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Animated Strikethrough for Original Total */
#quote #total-with-notary.strikethrough {
  position: relative;
  text-decoration: none !important;
}

#quote #total-with-notary.strikethrough::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #cf4343;
  z-index: 1;
  opacity: 0.6 !important;
  transform: translateY(-50%);
  animation: strikeThrough 0.5s ease forwards;
}

@keyframes strikeThrough {
  to {
    opacity: 1 !important;
  }
}

/* Glow Animation for Final Price */
#quote .card .animate-final-price {
  animation: glow 1.2s ease-in-out;
}

@keyframes glow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

/* Required Field Styling */
.dtp-required,
.apostilleOriginals-required,
.refundTextSworn-required,
.no-evaluation {
  color: #e54646 !important;
  font-style: italic !important;
  font-size: 13px !important;
}

/* Apostille originals info box */
.apostilleOriginals-required {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #ffe3b3;
  background: linear-gradient(135deg, #fffaf0 0%, #fff4e0 100%);
  color: #7a4a00 !important;
  font-style: normal !important;
  font-size: 14px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.apostilleOriginals-required::before {
  content: 'ℹ';
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
  color: #c27800;
}

/* DTP required info box */
.dtp-required {
  display: block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #cfe6ff;
  background: linear-gradient(135deg, #f5faff 0%, #eaf3ff 100%);
  color: #11457a !important;
  font-style: normal !important;
  font-size: 14px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.dtp-required::before {
  content: '⚙';
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
  color: #2e6fbe;
}

.details-generated {
  background: linear-gradient(to right, #11998e, #38ef7d);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.final-price {
  margin-top: 20px;
}

.expedited-sworn-text {
  /* Vibrant sunrise */
  background: linear-gradient(45deg, #FFC371, #FF5F6D);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 600;
  font-style: normal;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  text-align: center;
}

#apostille-turnaround {
  /* Forest Whisper */
  background: linear-gradient(to right, #005AA7, #FFFDE4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 600;
  font-style: normal;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  text-align: center;


}

#total-with-notary {
  /* Gold */
  background: linear-gradient(to right, #BF953F, #FCF6BA);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 600;
  font-style: normal;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  text-align: center;

  font-size: 20px !important;

}

#apostille-originals-text {
  /* Orange */
  background: linear-gradient(to right, #994711, #ef8a38);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 600;
  font-style: normal;
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  text-align: center;
}

.quote-ready {
  width: 150px;
  height: 150px;
}

#dtp-required {
  /* Silver */
  background: linear-gradient(to right, #8d8783, #4e4b48);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.after-pay {
  font-size: 10px;
}

.payment-methods-div {
  width: 80% !important;
  max-width: 80% !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.payment-methods {
  width: 80% !important;
  max-width: 80% !important;
}

.dtp-required,
.apostilleOriginals-required,
.refundTextSworn-required,
.no-evaluation {
  color: #e54646 !important;
  font-style: italic !important;
  font-size: 13px !important;
}

.error-icon {
  width: 50px;
  height: 50px;
}

.admin-response-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 15px 0 !important;
  border-left: 4px solid #4ECDC4 !important;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  /* Prevent flex shrinking */
  box-sizing: border-box !important;
  /* Include padding in width calculation */
}

.admin-response-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  width: 300px !important;
  max-width: 300px !important;
}

@media (max-width: 768px) {
  .admin-response-wrapper {
    max-width: 90% !important;
    width: 90% !important;
    padding: 15px !important;
    margin: 10px 0 !important;
  }
}

.admin-response-container::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #4ECDC4, #44A08D) !important;
}

.admin-response-header {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
}

.admin-response-icon {
  font-size: 1.2rem !important;
  margin-right: 8px !important;
}

.admin-response-title {
  color: #FFFFFF !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.admin-response-content {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 15px !important;
  backdrop-filter: blur(10px) !important;
}

.admin-response-text {
  color: #FFFFFF !important;
  line-height: 1.6 !important;
  font-size: 0.95rem !important;
  margin-bottom: 10px !important;
}

.read-more-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(5px) !important;
}

.read-more-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 768px) {

  .admin-response-title {
    font-size: 1rem !important;
  }

  .admin-response-text {
    font-size: 0.9rem !important;
  }
}

.admin-response-question-text {
  color: #FFFFFF !important;
  font-size: 0.75rem !important;
  margin-bottom: 10px !important;
}

.admin-response-container .client-question-section {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}

.admin-response-container .client-question-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.admin-response-container .client-question-icon {
  font-size: 16px !important;
}

.admin-response-container .client-question-label {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  font-size: 0.9rem !important;
}

.admin-response-container .client-question-text {
  color: #F0F0F0 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  font-style: italic !important;
}

.admin-response-container .admin-answer-section {
  margin-top: 8px !important;
}

.admin-response-container .admin-answer-header {
  margin-bottom: 8px !important;
}

.admin-response-container .admin-answer-label {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  font-size: 0.9rem !important;
}

/* Payment Section - Clean and Scoped Design */
.payment-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin: 20px 0 !important;
  border: 1px solid #e9ecef !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

.payment-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #007bff, #0056b3) !important;
}

.tier3-language-notice {
  width: 100%;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #3b82f6;
  border-radius: 8px;
  background: #f7fbff;
  color: #334155;
  text-align: left;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.06);
}

.tier3-language-notice__eyebrow {
  margin: 0 0 4px;
  color: #1d4ed8;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tier3-language-notice__title {
  margin: 0 0 8px;
  color: #1e3a8a;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor;
  background: none;
}

.tier3-language-notice__copy {
  margin: 0;
  color: #475569;
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 1.55;
}

.language-availability-terms {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.48;
}

.language-availability-terms a {
  color: #1d4ed8;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.language-availability-terms a:hover,
.language-availability-terms a:focus-visible {
  color: #1e40af;
}

.rare-language-acknowledgement {
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid #fdba74;
  border-left: 4px solid #c2410c;
  border-radius: 8px;
  background: #fffaf5;
  color: #334155;
  text-align: left;
  box-shadow: 0 3px 10px rgba(124, 45, 18, 0.08);
}

.rare-language-acknowledgement.is-pending {
  border-color: #fb923c;
  border-left-color: #9a3412;
  box-shadow: 0 4px 14px rgba(154, 52, 18, 0.13);
}

.rare-language-acknowledgement.is-acknowledged {
  border-color: #99f6e4;
  border-left-color: #0f766e;
  background: #f8fffd;
  box-shadow: 0 3px 10px rgba(15, 118, 110, 0.08);
}

.rare-language-acknowledgement__eyebrow {
  margin: 0 0 4px;
  color: #9a3412;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rare-language-acknowledgement__title {
  margin: 0 0 9px;
  color: #1e293b;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: 0;
  -webkit-text-fill-color: currentColor;
  background: none;
}

.rare-language-acknowledgement__copy {
  margin: 0 0 13px;
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.55;
}

.rare-language-acknowledgement__confirmation {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
}

.rare-language-acknowledgement__confirmation input[type="checkbox"] {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  align-self: start;
  justify-self: start;
  accent-color: #0f766e;
  cursor: pointer;
}

@media (max-width: 640px) {

  .tier3-language-notice,
  .rare-language-acknowledgement {
    padding: 14px;
  }

  .rare-language-acknowledgement__confirmation {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
    text-align: left !important;
  }

  .rare-language-acknowledgement__confirmation input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-grid !important;
    place-content: center;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 2px 0 0 !important;
    border: 2px solid #94a3b8 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 120ms ease, background-color 120ms ease !important;
  }

  .rare-language-acknowledgement__confirmation input[type="checkbox"]::before {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
  }

  .rare-language-acknowledgement__confirmation input[type="checkbox"]:checked {
    border-color: #0f766e !important;
    background: #0f766e !important;
  }

  .rare-language-acknowledgement__confirmation input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
  }

  .rare-language-acknowledgement__confirmation input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.24) !important;
    outline-offset: 2px;
    box-shadow: none !important;
    transform: none !important;
  }
}

.rare-language-acknowledgement__requirement {
  display: none;
  margin: 8px 0 0;
  color: #9a3412;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.rare-language-acknowledgement.is-pending .rare-language-acknowledgement__requirement {
  display: block;
}

#quote .btn-primary:disabled,
#quote .btn-primary:disabled:hover,
.payment-section .btn-primary:disabled,
.payment-section .btn-primary:disabled:hover {
  background: #94a3b8 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.72 !important;
  transform: none !important;
}

.payment-section .payment-header {
  text-align: center !important;
  margin-bottom: 20px !important;
}

.payment-section .payment-title {
  color: #212529 !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
  text-shadow: none !important;
}

.payment-section .payment-subtitle {
  color: #6c757d !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

.payment-section .price-breakdown {
  background: rgba(248, 249, 250, 0.8) !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  backdrop-filter: blur(10px) !important;
}

.payment-section .price-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(233, 236, 239, 0.5) !important;
}

.payment-section .price-item:last-child {
  border-bottom: none !important;
}

.payment-section .price-label,
.payment-section .price-value {
  color: #495057 !important;
  font-size: 0.95rem !important;
}

.payment-section .price-item.price-fine-print {
  padding: 4px 0 8px !important;
  border-bottom: 1px solid rgba(233, 236, 239, 0.35) !important;
}

.payment-section .price-item.price-fine-print .price-label,
.payment-section .price-item.price-fine-print .price-value {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  opacity: 0.72 !important;
}

.payment-section .price-value {
  font-weight: 600 !important;
}

.payment-section .price-divider {
  border: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #007bff, #0056b3) !important;
  margin: 16px 0 !important;
}

.payment-section .price-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.payment-section .quote-edit-wrap {
  margin: 6px 0 8px !important;
  padding: 16px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.payment-section .quote-edit-preview {
  margin: 0 !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: #475569 !important;
}

.payment-section .quote-edit-preview[data-kind="pending"] {
  color: #1d4ed8 !important;
}

.payment-section .quote-edit-preview[data-kind="success"] {
  color: #166534 !important;
}

.payment-section .quote-edit-preview[data-kind="warning"] {
  color: #b45309 !important;
}

.payment-section .quote-edit-shortcut {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 6px 0 12px !important;
  padding: 14px 16px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f7ff 100%) !important;
}

.payment-section .total-label,
.payment-section .total-value {
  color: #212529 !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

.payment-section .accuracy-note {
  background: rgba(13, 110, 253, 0.1) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  color: #0d6efd !important;
  font-size: 0.9rem !important;
  margin-bottom: 16px !important;
  border-left: 4px solid #0d6efd !important;
}

.payment-section .apostille-note {
  background: rgba(13, 110, 253, 0.1) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  color: #0d6efd !important;
  font-size: 0.9rem !important;
  margin-bottom: 16px !important;
  border-left: 4px solid #0d6efd !important;
  max-width: 600px !important;
}

.payment-section .evaluation-disclaimer {
  background: rgba(13, 110, 253, 0.1) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  color: #0d6efd !important;
  font-size: 0.9rem !important;
  margin-bottom: 16px !important;
  border-left: 4px solid #0d6efd !important;
}

.payment-section .policies-section {
  margin-bottom: 20px !important;
}

.payment-section .policies-section details {
  background: rgba(248, 249, 250, 0.8) !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  padding: 16px !important;
  color: #495057 !important;
}

.payment-section .policies-section details summary {
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #495057 !important;
  list-style: none !important;
  outline: none !important;
}

.payment-section .policies-section details summary::-webkit-details-marker {
  display: none !important;
}

.payment-section .policies-section details summary::marker {
  display: none !important;
}

.payment-section .policies-section details summary::after {
  content: "▶" !important;
  color: #6c757d !important;
  transition: transform 0.2s ease !important;
  font-size: 0.8rem !important;
  margin-left: auto !important;
}

.payment-section .policies-section details[open] summary::after {
  transform: rotate(90deg) !important;
}

.payment-section .policies-section details summary:hover {
  background: #f1f3f4 !important;
}

.payment-section .policies-section .details-content {
  margin-top: 16px !important;
  line-height: 1.6 !important;
}

.payment-section .policies-section h4 {
  color: #0d6efd !important;
  margin-bottom: 8px !important;
}

.payment-section .policies-section ul,
.payment-section .policies-section ol {
  margin-left: 16px !important;
  margin-bottom: 12px !important;
}

.payment-section .policies-section a {
  color: #0d6efd !important;
  text-decoration: underline !important;
}

.payment-section .policies-section p {
  color: #495057 !important;
}

.payment-section .payment-actions {
  text-align: center !important;
}

.payment-section .btn {
  padding: 12px 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1.2 !important;
}

.payment-section .btn-primary {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
  color: #ffffff !important;
}

.payment-section .btn-primary:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
}

.payment-section .btn-secondary {
  background: #ffffff !important;
  color: #6c757d !important;
  border: 1px solid #dee2e6 !important;
}

.payment-section .btn-secondary:hover {
  background: #f8f9fa !important;
  color: #495057 !important;
  transform: translateY(-1px) !important;
}

#quote .quote-edit-actions .quote-edit-toggle-btn.btn.btn-secondary,
.payment-section .quote-edit-actions .quote-edit-toggle-btn.btn.btn-secondary {
  width: auto !important;
  min-height: 32px !important;
  padding: 6px 11px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  justify-content: center !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

#quote .quote-edit-actions .quote-edit-toggle-btn.btn.btn-secondary:hover,
.payment-section .quote-edit-actions .quote-edit-toggle-btn.btn.btn-secondary:hover {
  background: #f8fafc !important;
  color: #1e293b !important;
  border-color: #94a3b8 !important;
  transform: none !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

.payment-section .rep-image {
  width: 50px !important;
  height: 40px !important;
  border-radius: 50% !important;
  vertical-align: middle !important;
}

.payment-section .payment-methods {
  max-width: 300px !important;
  height: auto !important;
  margin: 0 auto !important;
}

.payment-section .text-muted {
  color: #6c757d !important;
  font-size: 0.85rem !important;
}

.payment-section .text-center {
  text-align: center !important;
  color: #495057 !important;
}

.payment-section .card {
  background: #ffffff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}

.payment-section .card.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .payment-section {
    padding: 16px !important;
    margin: 10px 0 !important;
  }

  .payment-section .payment-title {
    font-size: 1.2rem !important;
  }

  .payment-section .price-breakdown {
    padding: 16px !important;
  }

  .payment-section .btn {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }

  .payment-section .rep-image {
    width: 25px !important;
    height: 25px !important;
  }
}

#quote #total-with-notary.strikethrough {
  position: relative;
  text-decoration: none !important;
  /* Remove the default strikethrough */
}

#quote #total-with-notary.strikethrough::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #cf4343;
  /* Or any color you want for the line */
  z-index: 1;
  opacity: 0.6 !important;
  /* Start invisible */
  transform: translateY(-50%);
  animation: strikeThrough 0.5s ease forwards;
}

@keyframes strikeThrough {
  to {
    opacity: 0.8;
    /* Fade in the line */
  }
}

#quote .card .discount-highlight {
  background-color: var(--discount-bg-color) !important;
  padding: 8px 12px !important;
  margin: 4px -12px !important;
  /* Extend to edges of card padding */
  border-radius: 8px !important;
}

#quote .card #discount-item p,
#quote .card #flat-discount-item p {
  font-weight: 500 !important;
}

#quote .card #discount-item p:last-child,
#quote .card #flat-discount-item p:last-child {
  color: #155724 !important;
  /* A darker, more readable green */
  font-weight: 700 !important;
}

#quote .card #final-price-item p:first-child {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-color-dark) !important;
}

#quote .card #final-price {
  font-size: 24px !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #34d399, #10b981) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#quote .card .animate-final-price {
  animation: glow 1.2s ease-in-out;
}

/* --- Glow Animation --- */
@keyframes glow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

/* --- Promotional Discount Styles --- */

#quote .card .discount-highlight {
  background-color: #e6f7ec !important;
  /* Soft green highlight for discount */
  padding: 8px 12px !important;
  margin: 4px -12px !important;
  /* Extend to edges of card padding */
  border-radius: 8px !important;
}

#quote .card #discount-item p,
#quote .card #flat-discount-item p {
  font-weight: 500 !important;
}

#quote .card #discount-item p:last-child,
#quote .card #flat-discount-item p:last-child {
  color: #155724 !important;
  /* A darker, more readable green */
  font-weight: 700 !important;
}

#quote .card #final-price-item p:first-child {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #212529 !important;
  /* Replaced CSS variable */
}

#quote .card #final-price {
  font-size: 24px !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #34d399, #10b981) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#quote .card .animate-final-price {
  animation: glow 1.2s ease-in-out;
}

/* --- Glow Animation --- */
@keyframes glow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

.to-be-confirmed {
  margin-top: 60px;
  margin-bottom: 20px;

  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  position: relative;
  top: 0;
  padding: 40px 32px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);

  display: none;
  max-width: 500px;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  /* Modern overlay effect */
  backdrop-filter: blur(10px);
}

/* Add a subtle top accent */
.to-be-confirmed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: 16px 16px 0 0;
}

#refundTextSworn-required {
  display: block !important;
  margin-top: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #f5c27b !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%) !important;
  color: #7c2d12 !important;
  font-style: normal !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#refundTextSworn-required::before {
  content: 'Important:';
  display: inline;
  margin-right: 6px;
  font-weight: 700;
  color: #9a3412;
}