/* Unified card styling for details panels */
details.details-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 0.5rem 0.75rem 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin: 12px 0;
}

details.details-card[open] {
  padding-bottom: 1rem;
}

details.details-card .details-summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0.25rem 0.5rem;
  margin: 0 -0.25rem 0.5rem;
  border-bottom: 1px dashed rgba(0,0,0,0.1);
}

/* Rows inside details */
.more-details .details-row,
.timestamps p,
.additional-actions-div p {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px;
  align-items: start;
  margin: 8px 0;
}

.more-details .details-row span:first-child,
.timestamps p span:first-child {
  color: #3b3b3b;
  font-weight: 600;
}

.more-details .details-row .value,
.timestamps p .value {
  color: #1f1f1f;
}

/* Lists inside details */
.details-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.details-list li {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}

.details-list li:last-child {
  border-bottom: none;
}

.discount-list {
  color: #667085;
  text-align: center;
}

.payment-list {
  text-align: center;
}

/* Responsive tweak */
@media (max-width: 560px) {
  .more-details .details-row,
  .timestamps p,
  .additional-actions-div p {
    grid-template-columns: 1fr;
  }
}

/* Section dividers inside More details */
.more-details .details-row.section-start {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.12);
}

/* Icons for key labels (emoji-based for simplicity) */
.more-details .row-country span:first-child::before {
  content: "🌎 ";
}
.more-details .row-location span:first-child::before {
  content: "📍 ";
}
.more-details .row-wordcount span:first-child::before {
  content: "📝 ";
}
.more-details .row-languages span:first-child::before {
  content: "💬 ";
}
.more-details .row-pages span:first-child::before {
  content: "📄 ";
}
.more-details .row-confidence-lang span:first-child::before {
  content: "📊 ";
}
.more-details .row-translation-cost span:first-child::before,
.more-details .row-price-per-page span:first-child::before,
.more-details .row-price-per-word span:first-child::before,
.more-details .row-price-diff span:first-child::before,
.more-details .row-price-with-notary span:first-child::before,
.more-details .row-total-cost span:first-child::before {
  content: "💵 ";
}
.more-details .row-notary-count span:first-child::before {
  content: "🖋️ ";
}
.more-details .row-order-id span:first-child::before {
  content: "# ";
  font-weight: 700;
}

/* Icon for all timestamp labels */
.timestamps p span:first-child::before {
  content: "🕒 ";
}

/* Specific timestamp icons */
.timestamps .ts-submitted span:first-child::before { content: "📤 "; }
.timestamps .ts-invoice-created span:first-child::before { content: "🧾 "; }
.timestamps .ts-payment span:first-child::before { content: "💳 "; }
.timestamps .ts-completed span:first-child::before { content: "✅ "; }
.timestamps .ts-corrections-requested span:first-child::before { content: "✍️ "; }
.timestamps .ts-corrected span:first-child::before { content: "🛠️ "; }
.timestamps .ts-corrections-approved span:first-child::before { content: "✔️ "; }
.timestamps .ts-digitally-notarized span:first-child::before { content: "🖥️ "; }
.timestamps .ts-ink-notarized span:first-child::before { content: "🖊️ "; }
.timestamps .ts-shipping span:first-child::before { content: "📦 "; }
.timestamps .ts-eval-completed span:first-child::before { content: "📚 "; }
.timestamps .ts-eval-corrected span:first-child::before { content: "🔁 "; }
.timestamps .ts-eval-approved span:first-child::before { content: "🏁 "; }

/* Process description single-column readability */
details.general-instructions-details {
  display: block;
}
.general-instructions-text {
  max-width: 72ch; /* optimal reading width */
  line-height: 1.6;
  display: block;
  flex: unset;
  grid: unset;
  float: none;
  clear: both;
}

.general-instructions-text * {
  display: revert;
}
.general-instructions-text h2,
.general-instructions-text h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}
.general-instructions-text ol,
.general-instructions-text p {
  margin: 0.5rem 0;
}
.general-instructions-text ol {
  padding-left: 1.25rem;
}
.general-instructions-text li {
  margin: 0.25rem 0;
}
.general-instructions-text a {
  text-decoration: underline;
}
/* Ensure note/value text in hidden details wraps nicely and preserves line breaks */
.hidden-details p span.value {
  white-space: pre-wrap; /* honor \n from textContent */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Make hidden-details contents responsive and prevent overflow on flex items */
.hidden-details {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* let children fill width */
  width: 100%;
}
.hidden-details p {
  display: flex;
  flex-wrap: wrap; /* allow label/value to wrap on narrow screens */
  width: 100%;
  min-width: 0; /* critical: allow flex item to shrink within parent */
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Label column: responsive fixed basis; value takes the rest */
.hidden-details p > span:first-child {
  flex: 0 0 clamp(120px, 38%, 200px);
  min-width: 0;
}
.hidden-details p > .value {
  flex: 1 1 0%;
  min-width: 0; /* allow wrapping instead of overflow */
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
  .hidden-details p { gap: 10px; }
  .hidden-details p > span:first-child { flex-basis: clamp(120px, 40%, 180px); }
}
/* Mobile adjustments */
@media (max-width: 480px) {
  .hidden-details p { gap: 8px; display: block; }
  .hidden-details p > span:first-child { display: block; margin-bottom: 6px; }
}

/* Small tablets: if space is tight, stack as well */
@media (max-width: 640px) {
  .hidden-details p { display: block; }
  .hidden-details p > span:first-child { display: block; margin-bottom: 6px; }
}

* {
box-sizing: border-box;
}
html {
height: 100%;
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
line-height: 1.6;
color: #2d3748;

background-color: #d9e1ee;
background-image: radial-gradient(circle, rgba(143, 161, 190, 0.5) 1px, transparent 1px);
background-size: 20px 20px;
background-attachment: fixed;

margin: 0;
padding: 0;
min-height: 100vh;
}


/* Enhanced Typography with Gradient Colors */
h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {        
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  font-optical-sizing: auto; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  transition: all 0.3s ease;
}
/* Hover effects for gradient headings */
h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *):hover,
h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *):hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 50%, #f093fb 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3:not(.confidence-level, .whats-next-title, .based-results, .payment-title):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
h4:not(.details-content h4, #confirmation-box h4, .text-center):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
h5:not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
h6:not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  font-style: normal;
  font-optical-sizing: auto;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #1e3a8a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

/* Modern placeholder styling for all inputs and selects */
input:not(.rememberMeCheckbox), select {
  margin: 5px 0;
  margin-bottom: 15px;
  margin-top: 20px;
  height: 56px;
  font-family: inherit;
  width: 100%;
  max-width: 320px;
  border: 2px solid rgba(148, 163, 184, 0.3);
  font-weight: 500;
  outline: 0;
  font-size: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 
              0 1px 2px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #374151;
}
input:focus:not(.rememberMeCheckbox), select:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1),
              0 4px 6px rgba(0, 0, 0, 0.1),
              0 2px 4px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}
input::placeholder {
  color: rgba(107, 114, 128, 0.7);
  font-weight: 400;
  transition: all 0.3s ease;
}
input:focus::placeholder {
  color: rgba(107, 114, 128, 0.5);
  transform: translateX(4px);
}
input.invalid {
  background: rgba(254, 226, 226, 0.8);
  backdrop-filter: blur(10px);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1),
              0 1px 3px rgba(239, 68, 68, 0.2);
  color: #dc2626;
}
select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 50px;
}
select:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(255, 255, 255, 0.8);
}
option {
  color: #374151;
  font-size: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}
label {
  font-style: normal;
  font-optical-sizing: auto;
  text-align: left;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.025em;
  display: block;
}
a {
  color: #6366f1;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
}
a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.3s ease;
  border-radius: 1px;
}
a:hover {
  color: #4f46e5;
  transform: translateY(-1px);
}
a:hover::after {
  width: 100%;
}
textarea {
  font-size: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  border: 2px solid rgba(148, 163, 184, 0.3);
  border-radius: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
              0 1px 2px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  resize: vertical;
  font-family: inherit;
  color: #374151;
}
textarea:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1),
              0 4px 6px rgba(0, 0, 0, 0.1),
              0 2px 4px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
details:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
  max-width: 600px;
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
              0 1px 2px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  overflow: hidden;
  margin: 20px auto;
  padding: 20px;
}
details:hover:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
  cursor: pointer;
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
              0 2px 4px rgba(0, 0, 0, 0.06);
}
details summary:not(#quote details summary, .files-summary, .files-summary-2, .files-details summary, .notarized-files-summary) {
  font-weight: 500;
  color: #374151;
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 16px 16px 0 0;
}
details[open] summary:not(#quote details summary, .files-details summary, .notarized-files-summary) {
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}
hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, 
              transparent 0%, 
              rgba(148, 163, 184, 0.3) 20%, 
              rgba(148, 163, 184, 0.6) 50%, 
              rgba(148, 163, 184, 0.3) 80%, 
              transparent 100%);
  margin: 32px 0;
  border-radius: 1px;
}



button:not(.list-item-button, .document-image-deleter-1, .navbar-toggle, #whats-next-toggle,
.fg-close, .fg-nav, .view-files-button, .psb-close,
#confirm-with-rep-button, .card-button, .download-all-button,
.show-quote-btn, .saved-file-div-button-close, .same-file-div-button-close, 
.read-more-btn-2, #cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile) {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
font-family: 'Inter', system-ui, sans-serif;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
min-width: 140px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
button:not(.list-item-button, .document-image-deleter-1, #whats-next-toggle,
.fg-close, .fg-nav, .view-files-button, .psb-close,
#confirm-with-rep-button, .card-button, .download-all-button,
.navbar-toggle, .saved-file-div-button-close, .same-file-div-button-close, .read-more-btn-2, 
#cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile):hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
transform: translateY(0);
box-shadow: 0 6px 16px rgba(118, 75, 162, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
button:not(.list-item-button, .document-image-deleter-1, .psb-close,
#whats-next-toggle, .fg-close, .fg-nav, .view-files-button,
#confirm-with-rep-button, .card-button, .download-all-button,
.navbar-toggle, .saved-file-div-button-close, .same-file-div-button-close, .read-more-btn-2, 
#cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile):active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(17, 153, 142, 0.3);
}

/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* Large Desktop Screens (1440px and up) */
@media (min-width: 1440px) {
  h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
  h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 48px;
  }
  
  h3:not(.confidence-level, .based-results, .payment-title):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h4:not(.details-content h4, #confirmation-box h4, .text-center):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h5:not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h6:not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 36px;
  }
  
  input, select {
    max-width: 380px;
    height: 60px;
    font-size: 18px;
    padding: 18px 24px;
  }
  
  textarea {
    min-height: 140px;
    padding: 20px 24px;
    font-size: 18px;
  }
  
  button:not(.list-item-button, .document-image-deleter-1, .navbar-toggle, #confirm-with-rep-button,
  .show-quote-btn, .saved-file-div-button-close, .same-file-div-button-close, .psb-close,
  .read-more-btn-2, #cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile) {
    padding: 18px 36px;
    font-size: 18px;
    min-width: 160px;
  }
  
  details:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
    max-width: 700px;
    padding: 24px;
  }
}

/* Desktop Screens (1025px to 1439px) */
@media (min-width: 1025px) and (max-width: 1439px) {
  h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
  h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 42px;
  }
  
  h3:not(.confidence-level, .based-results, .payment-title):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h4:not(.details-content h4, #confirmation-box h4, .text-center):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h5:not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h6:not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 32px;
  }
  
  input, select {
    max-width: 350px;
    height: 58px;
    font-size: 17px;
    padding: 17px 22px;
  }
  
  textarea {
    min-height: 130px;
    padding: 18px 22px;
    font-size: 17px;
  }
  
  button:not(.list-item-button, .document-image-deleter-1, .navbar-toggle, #confirm-with-rep-button,
  .show-quote-btn, .saved-file-div-button-close, .same-file-div-button-close, .psb-close,
  .read-more-btn-2, #cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile) {
    padding: 17px 34px;
    font-size: 17px;
    min-width: 150px;
  }
  
  details:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
    max-width: 650px;
    padding: 22px;
  }
}

/* Large Tablets (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
  h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 36px;
  }
  
  h3:not(.confidence-level, .based-results, .payment-title):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h4:not(.details-content h4, #confirmation-box h4, .text-center):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h5:not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h6:not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 26px;
  }
  
  input, select {
    max-width: 100%;
    width: 100%;
    height: 54px;
    font-size: 16px;
    padding: 15px 18px;
    margin: 8px 0;
  }
  
  textarea {
    width: 100%;
    min-height: 110px;
    padding: 16px 18px;
    font-size: 16px;
  }
  
  button:not(.list-item-button, .document-image-deleter-1, .navbar-toggle, #confirm-with-rep-button,
  .show-quote-btn, .saved-file-div-button-close, .same-file-div-button-close, .psb-close,
  .read-more-btn-2, #cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile) {
    padding: 15px 28px;
    font-size: 16px;
    min-width: 130px;
    width: auto;
  }
  
  details:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
    max-width: 90%;
    margin: 16px auto;
    padding: 18px;
  }
  
  label {
    font-size: 15px;
    margin-bottom: 6px;
  }
}

/* Small Tablets and Large Mobile (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
  h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 32px;
    line-height: 1.3;
  }
  
  h3:not(.confidence-level, .based-results, .payment-title):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h4:not(.details-content h4, #confirmation-box h4, .text-center):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h5:not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h6:not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 22px;
    line-height: 1.4;
  }
  
  input, select {
    max-width: 100%;
    width: 100%;
    height: 50px;
    font-size: 16px;
    padding: 14px 16px;
    margin: 6px 0;
    border-radius: 12px;
    /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
  }
  
  select {
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 40px;
  }
  
  textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 12px;
    /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
  }
  
  button:not(.list-item-button, .document-image-deleter-1, .navbar-toggle, #confirm-with-rep-button,
  .show-quote-btn, .saved-file-div-button-close, .same-file-div-button-close, .psb-close,
  .read-more-btn-2, #cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile) {
    padding: 14px 24px;
    font-size: 15px;
    min-width: 120px;
    width: auto;
    border-radius: 10px;
  }
  
  details:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
    max-width: 95%;
    margin: 14px auto;
    padding: 16px;
    border-radius: 12px;
  }
  
  label {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  a::after {
    height: 1.5px;
  }
}

/* Mobile Screens (320px to 480px) */
@media (max-width: 480px) {
  h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
  h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 16px;
  .general-instructions-text h2 {
    font-size: 1.15rem;
  }
  .general-instructions-text h3 {
    font-size: 1rem;
  }
  }
  
  h3:not(.confidence-level, .based-results, .payment-title):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h4:not(.details-content h4, #confirmation-box h4, .text-center):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h5:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
  h6:not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 12px;
  }
  
  input, select {
    max-width: 100%;
    width: 100%;
    height: 48px;
    font-size: 16px;
    padding: 12px 14px;
    margin: 4px 0 12px 0;
    border-radius: 10px;
    /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
    /* Improve touch targets */
    touch-action: manipulation;
  }
  
  select {
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 35px;
  }
  
  textarea {
    width: 100%;
    min-height: 90px;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 10px;
    /* Prevent zoom on iOS */
    -webkit-text-size-adjust: 100%;
    /* Improve touch targets */
    touch-action: manipulation;
  }
  
  button:not(.list-item-button, .document-image-deleter-1, .navbar-toggle, #confirm-with-rep-button,
  .show-quote-btn, .saved-file-div-button-close, .same-file-div-button-close, .psb-close,
  .read-more-btn-2, #cancel-rep-question, .show-more-button, .btn.btn-secondary, .chat-button, .close-editor-mobile) {
    padding: 12px 20px;
    font-size: 14px;
    min-width: 100px;
    width: auto;
    max-width: 100%;
    border-radius: 8px;
    /* Improve touch targets */
    touch-action: manipulation;
    min-height: 44px;
  }
  
  details:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
    max-width: 100%;
    margin: 12px auto;
    padding: 14px;
    border-radius: 10px;
  }
  
  label {
    font-size: 13px;
    margin-bottom: 4px;
    line-height: 1.4;
  }
  
  a::after {
    height: 1px;
  }
  
  hr {
    margin: 24px 0;
  }
}

/* Extra Small Mobile (below 320px) */
@media (max-width: 319px) {
  h1:not(.navbar *):not(.navbar-brand *):not(.navbar-container *),
  h2:not(.selected-prices):not(.gradient-text-purple):not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 24px;
    line-height: 1.2;
  }
  
  h3:not(.confidence-level, .based-results, .payment-title):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h4:not(.details-content h4, #confirmation-box h4, .text-center):not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h5:not(.navbar *):not(.navbar-brand *):not(.navbar-container *), 
  h6:not(.navbar *):not(.navbar-brand *):not(.navbar-container *) {
    font-size: 18px;
    line-height: 1.3;
  }
  
  input, select {
    height: 44px;
    font-size: 16px;
    padding: 10px 12px;
    margin: 4px 0 10px 0;
    border-radius: 8px;
  }
  
  select {
    background-position: right 8px center;
    background-size: 10px;
    padding-right: 30px;
  }
  
  textarea {
    min-height: 80px;
    padding: 10px 12px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  button:not(.list-item-button, .document-image-deleter-1, .navbar-toggle, #confirm-with-rep-button,
  .show-quote-btn, .saved-file-div-button-close, .same-file-div-button-close, .psb-close,
  .read-more-btn-2, #cancel-rep-question, .show-more-button, .btn.btn-secondary, .close-editor-mobile, .chat-button) {
    padding: 10px 16px;
    font-size: 13px;
    min-width: 80px;
    border-radius: 6px;
    min-height: 40px;
  }
  
  details:not(#quote details, .files-details, .notarized-files-details, .additional-details-notary) {
    margin: 10px auto;
    padding: 12px;
    border-radius: 8px;
  }
  
  label {
    font-size: 12px;
    margin-bottom: 3px;
  }
  
  hr {
    margin: 20px 0;
  }
}











.reusables {
/* BUTTON COLORS */
background-image: linear-gradient(to right, #6a11cb, #2575fc) !important;
background-image: linear-gradient(to right, #4b79a1, #283e51) !important;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
/* Soft green */
background-image: linear-gradient(to right, #0d665c, #2b9e6b) !important;
/* Soft pink */
background-image: linear-gradient(to right, #ff758c, #ff7eb3) !important;
/* Soft red */
background-image: linear-gradient(to right, #8b0000, #b22222) !important;
/* Purple linear background */
border-radius: 20px;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

/* TEXT COLORS */
/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Gold */
background: linear-gradient(to right, #BF953F, #FCF6BA);  
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Silver */
background: linear-gradient(to right, #8d8783, #4e4b48); 
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Green */
background: linear-gradient(to right, #11998e, #38ef7d); 
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Orange */
background: linear-gradient(to right, #994711, #ef8a38); 
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Vibrant sunrise */
background: linear-gradient(45deg, #FFC371, #FF5F6D);  
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;


/* BACKGROUND COLORS */
background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
margin: 15% auto; 
padding: 20px;
padding-bottom: 50px;
border: none;
width: 300px; 
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
/* Body color */
background-color: #f8fafc;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

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



}

/* * {
  outline: 1px solid red;
} */



/* Interactive walkthrough */
.walkthrough {
display: none; /* Initially hide the walkthrough */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent background */
z-index: 1000; /* Ensure   
it's on top */
}
.walkthrough-step {
position: absolute;
bottom: 350px;
left: 20px;
background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
padding: 20px;
border-radius: 10px;
/* Add a relative position to allow positioning the pseudo-element */
max-width: 300px; /* Adjust as needed */ 
min-height: 170px; /* Adjust as needed */
display: flex;           /* Enable flexbox layout */
flex-direction: column;  /* Align items vertically */
align-items: center;    /* Center items horizontally */
position: absolute; /* Position the walkthrough step */
z-index: 1001;

}
#next-step-button {
background-image: linear-gradient(to right, #4b79a1, #283e51) !important;
color: #6b7280;
text-align: center;

}
.walkthrough-step::before {
content: "";
position: absolute;
top: 100%; /* Position the arrow at the bottom of the box */
left: 50%; /* Center the arrow horizontally */
transform: translateX(-50%); /* Adjust the arrow's position */
border-width: 10px; /* Adjust the arrow size as needed */
border-style: solid;
border-color: white transparent transparent transparent; /* White arrow pointing upwards */
}
.walkthrough-step.arrow-top::before {
top: -20px;
left: 50%;
transform: translateX(-50%);
border-color: transparent transparent white transparent;
} 
.walkthrough-step p {
color: rgb(185, 185, 185) !important; /* White text color */
}


.info-box, .processing-error-text {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  border: 1px solid #7dd3fc;
  border-left: 4px solid #0284c7;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0;
  font-size: 15px;
  line-height: 1.6;
  color: #1e293b;
  box-shadow: 
    0 2px 8px rgba(2, 132, 199, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  transition: all 0.3s ease;
  display: block;
  font-weight: 500;
  text-align: left;
}
.info-box:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 4px 16px rgba(2, 132, 199, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Add info icon before the text */
.info-box::before {
  content: 'ℹ️';
  font-size: 20px;
  margin-right: 8px;
  opacity: 0.9;
  display: inline-block;
  vertical-align: middle;
}
/* Alternative icon variants */
.info-box.with-checkmark::before {
  content: '✅';
}
.info-box.with-lightbulb::before {
  content: '💡';
}
.info-box.with-star::before {
  content: '⭐';
}
/* Color variants */
.info-box.success {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-color: #86efac;
  border-left-color: #059669;
  box-shadow: 
    0 2px 8px rgba(5, 150, 105, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05);
}
.info-box.success:hover {
  box-shadow: 
    0 4px 16px rgba(5, 150, 105, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
.info-box.warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-color: #fdba74;
  border-left-color: #d97706;
  box-shadow: 
    0 2px 8px rgba(217, 119, 6, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05);
}
.info-box.warning:hover {
  box-shadow: 
    0 4px 16px rgba(217, 119, 6, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
.info-box.warning::before {
  content: '⚠️';
}
.info-box.error, .processing-error-text {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border-color: #fca5a5;
  border-left-color: #dc2626;
  box-shadow: 
    0 2px 8px rgba(220, 38, 38, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05);
}
.info-box.error:hover, .processing-error-text:hover {
  box-shadow: 
    0 4px 16px rgba(220, 38, 38, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
.info-box.error::before, .processing-error-text::before {
  content: '❌';
}
/* Make it responsive */
@media (max-width: 768px) {
  .info-box {
    padding: 16px 18px;
    margin: 16px 0;
    font-size: 14px;
    border-radius: 10px;
  }
  
  .info-box::before {
    font-size: 18px;
    margin-right: 6px;
  }
}
@media (max-width: 480px) {
  .info-box {
    padding: 14px 16px;
    margin: 14px 0;
    font-size: 13px;
    border-radius: 8px;
  }
  
  .info-box::before {
    font-size: 16px;
    margin-right: 6px;
  }
}
/* Animation when element appears */
.info-box {
  animation: slideInUp 0.4s ease-out;
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Enhanced focus state for accessibility */
.info-box:focus-within {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}
/* Link styling within info boxes */
.info-box a {
  color: #0284c7;
  text-decoration: underline;
  font-weight: 600;
  transition: color 0.2s ease;
}
.info-box a:hover {
  color: #0369a1;
  text-decoration: none;
}
/* Subtle animation for better UX */
.info-box:active {
  transform: translateY(-1px);
  transition: transform 0.1s ease;
}
/* Special styling for info boxes with headings */
.info-box h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  display: inline;
}
/* Align icon with heading when present */
.info-box:has(h3)::before {
  vertical-align: top;
  margin-top: 1px;
}