/* ============================================================
   Task #1477247: 10/10 Polish — Calculator + Payout-Calculator + /ask + /quiz

   This file provides professional Fortune 500-grade visual polish to four key
   interactive tool pages. Standards applied:
   - WCAG AA contrast ratios (≥4.5:1 for text/background)
   - All-white backgrounds
   - Fraunces serif headings + DM Sans body
   - Consistent shadow elevation (0 1px 3px rgba(0,0,0,.05))
   - Clean form inputs with proper focus states
   - Result/output areas well-styled and readable
   - CTA buttons visible with no overlap
   - Mobile (375px) and desktop (1440px) responsive refinement
   ============================================================ */

/* ── FORM ELEMENTS — universal improvements ────────────────── */

.calc-input,
.calc-slider,
.calculator-input,
.payout-input,
.quiz-input,
.ask-input,
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  color: #1F2A37 !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.calc-input:focus,
.calc-slider:focus,
.calculator-input:focus,
.payout-input:focus,
.quiz-input:focus,
.ask-input:focus,
input:focus,
textarea:focus {
  outline: none !important;
  border-color: #00875A !important;
  box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.1) !important;
  background: #FFFFFF !important;
}

/* ── BUTTONS — universal improvements ────────────────── */

.calc-btn,
.calculator-btn,
.payout-btn,
.quiz-btn,
.ask-btn,
.btn-primary,
.btn-secondary,
button[type="submit"] {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  border: none !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

button[type="submit"]:active,
button:active {
  transform: translateY(1px) !important;
}

button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── CARDS AND OUTPUTS — elevation + contrast ────────────────── */

.calc-result,
.calculator-result,
.payout-card,
.quiz-card,
.ask-msg-bubble,
.card,
.sr-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  padding: 24px !important;
}

.calc-result:hover,
.calculator-result:hover,
.payout-card:hover,
.quiz-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: #D1D5DB !important;
}

/* ── TEXT CONTRAST — ensure readability ────────────────── */

.calc-result p,
.calculator-result p,
.payout-card p,
.quiz-card p,
.ask-msg-bubble p {
  color: #1F2A37 !important;
  line-height: 1.6 !important;
  margin: 0 0 12px 0 !important;
}

.calc-result p:last-child,
.calculator-result p:last-child,
.payout-card p:last-child,
.quiz-card p:last-child,
.ask-msg-bubble p:last-child {
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   CALCULATOR PAGE — /calculator
   ══════════════════════════════════════════════════════════ */

.calc-hero {
  background: #FFFFFF !important;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 4rem) !important;
}

.calc-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  color: #0A0A0A !important;
  font-size: clamp(32px, 6vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

.calc-hero-sub {
  color: #4B5563 !important;
  font-size: clamp(16px, 2vw, 18px) !important;
  line-height: 1.6 !important;
}

.calc-input {
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  background: #FFFFFF !important;
  color: #1F2A37 !important;
}

.calc-input::placeholder {
  color: #9CA3AF !important;
}

.calc-slider {
  border-radius: 4px !important;
  height: 6px !important;
}

.calc-slider::-webkit-slider-thumb {
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  background: #00875A !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.calc-slider::-moz-range-thumb {
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  background: #00875A !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.calc-result {
  margin-top: 32px !important;
  padding: 24px !important;
}

.calc-result h3 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
  margin-bottom: 8px !important;
}

.calc-result .payout-amount {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #00875A !important;
  line-height: 1.2 !important;
}

/* Mobile responsive — calculator */
@media (max-width: 768px) {
  .calc-hero {
    padding: 2rem 1.25rem !important;
  }

  .calc-hero h1 {
    font-size: clamp(24px, 5vw, 32px) !important;
  }

  .calc-result {
    padding: 16px !important;
    margin-top: 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PAYOUT CALCULATOR PAGE — /payout-calculator
   ══════════════════════════════════════════════════════════ */

.payout-hero {
  background: #FFFFFF !important;
  padding: clamp(2.5rem, 8vw, 4rem) clamp(1.25rem, 5vw, 4rem) !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.payout-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  color: #0A0A0A !important;
  font-size: clamp(32px, 6vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 16px 0 !important;
}

.payout-hero-sub {
  color: #4B5563 !important;
  font-size: clamp(16px, 2vw, 18px) !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
}

.payout-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 24px !important;
}

.payout-table th,
.payout-table td {
  padding: 16px !important;
  text-align: left !important;
  border-bottom: 1px solid #E5E7EB !important;
  color: #1F2A37 !important;
}

.payout-table th {
  background: #F9FAFB !important;
  font-weight: 600 !important;
  color: #0A0A0A !important;
  font-size: 14px !important;
}

.payout-table tbody tr:hover {
  background: #F9FAFB !important;
}

.payout-range {
  color: #00875A !important;
  font-weight: 600 !important;
}

.payout-link {
  color: #00875A !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.payout-link:hover {
  color: #006B4D !important;
  text-decoration: underline !important;
}

/* Mobile responsive — payout calculator */
@media (max-width: 768px) {
  .payout-hero {
    padding: 1.5rem 1.25rem !important;
  }

  .payout-table {
    font-size: 14px !important;
  }

  .payout-table th,
  .payout-table td {
    padding: 12px 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ASK PAGE — /ask
   ══════════════════════════════════════════════════════════ */

.ask-page {
  background: #FFFFFF !important;
}

.ask-hero {
  background: #FFFFFF !important;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 4rem) !important;
  border-bottom: 1px solid #E5E7EB !important;
}

.ask-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(32px, 6vw, 56px) !important;
  font-weight: 800 !important;
  color: #0A0A0A !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

.ask-hero-sub {
  color: #4B5563 !important;
  font-size: clamp(16px, 2vw, 18px) !important;
  line-height: 1.6 !important;
}

.ask-messages {
  background: #FFFFFF !important;
  padding: 24px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  min-height: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.ask-msg-bubble {
  background: #F9FAFB !important;
  border: none !important;
  padding: 16px !important;
  border-radius: 8px !important;
  color: #1F2A37 !important;
}

.ask-msg--ai .ask-msg-bubble {
  background: #E6F9F3 !important;
  border-left: 3px solid #00875A !important;
}

.ask-msg--user .ask-msg-bubble {
  background: #EFF6FF !important;
  border-left: 3px solid #1D4ED8 !important;
}

.ask-input {
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 16px !important;
  color: #1F2A37 !important;
  resize: vertical !important;
  min-height: 44px !important;
}

.ask-input:focus {
  outline: none !important;
  border-color: #00875A !important;
  box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.1) !important;
}

.ask-input::placeholder {
  color: #9CA3AF !important;
}

.ask-send-btn {
  background: #00875A !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.ask-send-btn:hover:not(:disabled) {
  background: #006B4D !important;
}

.ask-send-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.ask-chip {
  background: #FFFFFF !important;
  border: 1px solid #D1D5DB !important;
  color: #1F2A37 !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ask-chip:hover {
  background: #F9FAFB !important;
  border-color: #00875A !important;
  color: #00875A !important;
}

.ask-section-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
  margin: 0 0 8px 0 !important;
}

.ask-section-sub {
  color: #4B5563 !important;
  font-size: 16px !important;
  margin: 0 !important;
}

/* Mobile responsive — ask */
@media (max-width: 768px) {
  .ask-hero {
    padding: 1.5rem 1.25rem !important;
  }

  .ask-hero h1 {
    font-size: clamp(24px, 5vw, 32px) !important;
  }

  .ask-messages {
    min-height: 250px !important;
    padding: 16px !important;
  }

  .ask-input {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════
   QUIZ PAGE — /quiz
   ══════════════════════════════════════════════════════════ */

.quiz-page,
.quiz-section {
  background: #FFFFFF !important;
}

.quiz-hero {
  background: #FFFFFF !important;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 4rem) !important;
  border-bottom: 1px solid #E5E7EB !important;
  text-align: center !important;
}

.quiz-hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(32px, 6vw, 56px) !important;
  font-weight: 800 !important;
  color: #0A0A0A !important;
  line-height: 1.2 !important;
  margin: 0 0 16px 0 !important;
}

.quiz-hero-sub {
  color: #4B5563 !important;
  font-size: clamp(16px, 2vw, 18px) !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

.quiz-form {
  background: #FFFFFF !important;
  padding: clamp(2rem, 5vw, 3rem) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  max-width: 600px !important;
  margin: 24px auto !important;
}

.quiz-step {
  margin-bottom: 32px !important;
}

.quiz-step h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
  margin: 0 0 16px 0 !important;
}

.quiz-step-indicator {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

.quiz-step-indicator span {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #D1D5DB !important;
  transition: all 0.2s ease !important;
}

.quiz-step-indicator span.active {
  background: #00875A !important;
  width: 24px !important;
  border-radius: 4px !important;
}

.quiz-input {
  width: 100% !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
  font-size: 16px !important;
  color: #1F2A37 !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
}

.quiz-input:focus {
  outline: none !important;
  border-color: #00875A !important;
  box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.1) !important;
}

.quiz-input:checked {
  border-color: #00875A !important;
  background: #E6F9F3 !important;
}

.quiz-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  margin: 8px 0 !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.quiz-label:hover {
  background: #F9FAFB !important;
}

.quiz-cta {
  display: inline-block !important;
  background: #00875A !important;
  color: #FFFFFF !important;
  padding: 12px 32px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 24px !important;
  width: 100% !important;
  min-height: 48px !important;
}

.quiz-cta:hover:not(:disabled) {
  background: #006B4D !important;
}

.quiz-cta:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Mobile responsive — quiz */
@media (max-width: 768px) {
  .quiz-hero {
    padding: 1.5rem 1.25rem !important;
  }

  .quiz-hero h1 {
    font-size: clamp(24px, 5vw, 32px) !important;
  }

  .quiz-form {
    padding: 1.5rem !important;
    margin: 16px auto !important;
  }
}

/* ══════════════════════════════════════════════════════════
   UNIVERSAL — all 4 pages
   ══════════════════════════════════════════════════════════ */

/* Ensure white background on all pages */
body.calc,
body.calculator,
body.payout,
body.quiz,
body.ask {
  background: #FFFFFF !important;
}

/* Disable hairline borders */
.hairline,
.border-hairline {
  border: none !important;
}

/* Fix any overflow or clipping issues */
.calc-page,
.calculator-page,
.payout-page,
.quiz-page,
.ask-page {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ── Task #1537246: Fix whitespace on /quiz and /estimator ─────────── */

/* Quiz page: remove min-height:100vh that creates whitespace below short steps */
.qw-page {
  min-height: auto !important;
  padding-bottom: 2rem !important;
}

/* ── Task #1537246: Fix section-label → heading gap on tools pages ── */
/* The hub-section-label had 2.5rem top margin creating 100-200px gaps */
.hub-section-label {
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}
.hub-section-label:first-child {
  margin-top: 0 !important;
}

/* Service Worker — bump version for cache bust */