/* ============================================
   GMP Area Answer Page Redesign v1.5.0
   Generalized — works on all 8 area question/answer pages
   Color: GMP Cyan (#00D4FF)
   Layout: question stacked above editor (vertical)
   ============================================ */

/* --- Question wrapper card --- */
.tax-2026-areas-of-life .question__wrapper {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  padding: 28px 32px;
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
}

/* --- Question heading --- */
.tax-2026-areas-of-life .question__heading {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

.tax-2026-areas-of-life .question__title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

.tax-2026-areas-of-life .question__heading small,
.tax-2026-areas-of-life .question__title small {
  font-family: 'Inter', sans-serif; font-size: 13px; color: #718096; font-weight: 400;
}

.tax-2026-areas-of-life .question__header .has-tip { color: #cbd5e0; transition: color 0.2s; }
.tax-2026-areas-of-life .question__header .has-tip:hover { color: #00D4FF; }

/* --- TinyMCE toolbar --- */
.tax-2026-areas-of-life .tox .tox-tbtn { border-radius: 6px !important; }
.tax-2026-areas-of-life .tox .tox-tbtn:hover { background: #edf2f7 !important; }
.tax-2026-areas-of-life .tox .tox-tbtn--enabled,
.tax-2026-areas-of-life .tox .tox-tbtn--enabled:hover { background: #00D4FF !important; color: #fff !important; }

/* --- Editor container (actual DOM: .question__answer-wrap) --- */
.tax-2026-areas-of-life .question__answer-wrap {
  border: 2px solid #00D4FF;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s ease;
}
.tax-2026-areas-of-life .question__answer-wrap:focus-within { border-color: #00b4d8; box-shadow: 0 0 0 3px rgba(0,212,255,0.12); }

.tax-2026-areas-of-life .question__answer-wrap .mce-tinymce {
  border: none !important;
  box-shadow: none !important;
}

.tax-2026-areas-of-life .question__answer-wrap .mce-top-part {
  background: #fafbfc !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* --- Layout: question stacked above editor (vertical) --- */
.tax-2026-areas-of-life .question__wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.tax-2026-areas-of-life .question__header {
  flex: 0 0 auto !important;
  width: 100% !important;
}

/* Editor full width below question */
.tax-2026-areas-of-life .question__answer-wrap {
  flex: 0 0 auto !important;
  width: 100% !important;
}

/* Hidden input should not disrupt flex layout */
.tax-2026-areas-of-life .question__wrapper > input.hidden {
  display: none !important;
}

/* Footer: stacked — previous answers on top, buttons below */
.tax-2026-areas-of-life .question__footer {
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
}

/* Related answers section — full width with padding */
.tax-2026-areas-of-life .question__footer .question__related {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 16px 20px !important;
}

/* Inner related header padding */
.tax-2026-areas-of-life .question__related .area-related-header {
  padding: 0 0 10px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
}

/* Related answer content area */
.tax-2026-areas-of-life .question__related .question__related-answer {
  padding: 12px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  font-size: 14px !important;
  color: #4a5568 !important;
  line-height: 1.6 !important;
}

/* Year tabs spacing */
.tax-2026-areas-of-life .question__related-year {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.tax-2026-areas-of-life .question__related-year.active {
  background: rgba(0,212,255,0.1) !important;
  color: #00b4d8 !important;
}
.tax-2026-areas-of-life .question__related-year:hover {
  background: rgba(0,212,255,0.06) !important;
}

/* === Action buttons — horizontal row below previous answers === */
.tax-2026-areas-of-life .question__buttons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 4px 0 0 !important;
  flex-shrink: 0 !important;
}

/* Base circle — spans (prev, next, save, etc.) */
.tax-2026-areas-of-life .question__buttons > span {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important; cursor: pointer;
  transition: all 0.2s ease !important; margin: 0 !important;
  padding: 0 !important;
}
/* Fix icon centering: force .has-tip to flex-center inside the circle */
.tax-2026-areas-of-life .question__buttons > span .has-tip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: normal !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tax-2026-areas-of-life .question__buttons > span i {
  font-size: 16px !important;
  color: #4a5568 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.tax-2026-areas-of-life .question__buttons > span:hover {
  border-color: #00D4FF !important;
  background: rgba(0,212,255,0.06) !important;
}
.tax-2026-areas-of-life .question__buttons > span:hover i { color: #00D4FF !important; }

/* Base circle — links */
.tax-2026-areas-of-life .question__buttons a {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important; cursor: pointer;
  font-family: 'Inter', sans-serif !important; font-size: 13px !important;
  font-weight: 500 !important; color: #4a5568 !important;
  transition: all 0.2s ease !important; margin: 0 !important;
  line-height: 1.4 !important; vertical-align: middle !important;
  text-decoration: none !important; padding: 0 !important;
}
.tax-2026-areas-of-life .question__buttons a:hover {
  border-color: #00D4FF !important;
  background: rgba(0,212,255,0.06) !important;
  color: #00D4FF !important;
}
.tax-2026-areas-of-life .question__buttons a:hover i { color: #00D4FF !important; }

/* Hide original text labels, keep icons */
.tax-2026-areas-of-life .question__buttons a { font-size: 0 !important; }
.tax-2026-areas-of-life .question__buttons a i {
  font-size: 16px !important; color: #4a5568 !important;
}

/* Save button special */
.tax-2026-areas-of-life .question__save {
  background: linear-gradient(135deg, #00D4FF, #00b4d8) !important;
  border: none !important;
  color: #fff !important;
  width: 42px !important;
  height: 42px !important;
  box-shadow: 0 2px 8px rgba(0,212,255,0.2) !important;
}
.tax-2026-areas-of-life .question__save:hover {
  background: linear-gradient(135deg, #00b4d8, #0099b8) !important;
  box-shadow: 0 4px 12px rgba(0,212,255,0.3) !important;
}
.tax-2026-areas-of-life .question__save i { color: #fff !important; }

/* Reset */
.tax-2026-areas-of-life span.question__reset {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important; cursor: pointer !important;
  transition: all 0.2s ease !important; margin: 0 !important;
}
.tax-2026-areas-of-life span.question__reset i { font-size: 12px !important; color: #a0aec0 !important; }
.tax-2026-areas-of-life span.question__reset:hover { border-color: #feb2b2 !important; background: rgba(229,62,62,0.04) !important; }
.tax-2026-areas-of-life span.question__reset:hover i { color: #e53e3e !important; }

/* === Progress bar (injected by JS) === */
.tax-2026-areas-of-life .area-answer-progress {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  padding: 14px 20px;
  margin-bottom: 20px;
  font-family: 'Inter', sans-serif;
}
.tax-2026-areas-of-life .area-answer-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 500; color: #2d3748; margin-bottom: 8px;
}
.tax-2026-areas-of-life .area-answer-progress-pct {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: #00D4FF; white-space: nowrap;
}

.tax-2026-areas-of-life .area-answer-progress-bar {
  flex: 1; height: 5px; background: #edf2f7; border-radius: 999px; overflow: hidden;
}
.tax-2026-areas-of-life .area-answer-progress-fill {
  height: 100%; background: linear-gradient(90deg, #00D4FF, #00b4d8);
  border-radius: 999px; width: 0; transition: width 0.8s ease;
}

/* === Breadcrumb & question counter === */
.tax-2026-areas-of-life .area-answer-breadcrumb,
.tax-2026-areas-of-life .area-question-counter {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  margin-bottom: 8px;
}
.tax-2026-areas-of-life .area-answer-breadcrumb { background: rgba(0,212,255,0.08); color: #00b4d8; }
.tax-2026-areas-of-life .area-question-counter { background: #f0f4f8; color: #4a5568; }

/* === Related/previous answers section === */
.tax-2026-areas-of-life .question__related {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.tax-2026-areas-of-life .question__related .question__title {
  font-size: 14px; font-weight: 600; color: #2d3748;
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* === Task 2: Fix "Here's what you said in" text spacing === */
/* The text is a naked text node inside .question__related — use padding + font to style it */
.tax-2026-areas-of-life .question__related {
  font-size: 14px !important;
  color: #4a5568 !important;
  line-height: 1.8 !important;
  padding: 18px 22px !important;
}

/* Give the header more breathing room below */
.tax-2026-areas-of-life .question__related .area-related-header {
  padding: 0 0 14px 0 !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
}

/* Year tabs — give them vertical margin so text node has space */
.tax-2026-areas-of-life .question__related-year {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* === Tasks 3 & 4: Hide textbox + footer on sub-category and tip pages === */
/* Sub-category pages use .section__wrapper, Tip pages use .tip__wrapper */
.tax-2026-areas-of-life .section__wrapper .question__answer-wrap,
.tax-2026-areas-of-life .tip__wrapper .question__answer-wrap {
  display: none !important;
}
.tax-2026-areas-of-life .section__wrapper > input.hidden,
.tax-2026-areas-of-life .tip__wrapper > input.hidden {
  display: none !important;
}

/* Style the sub-category and tip page content area */
.tax-2026-areas-of-life .section__wrapper,
.tax-2026-areas-of-life .tip__wrapper {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
  padding: 28px 32px !important;
  margin-bottom: 24px !important;
  font-family: 'Inter', sans-serif !important;
}

/* Sub-category / tip heading */
.tax-2026-areas-of-life .section__wrapper .question__title,
.tax-2026-areas-of-life .tip__wrapper .question__title {
  font-family: 'Inter', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Info/content area on sub-category and tip pages */
.tax-2026-areas-of-life .section__wrapper .question__info,
.tax-2026-areas-of-life .tip__wrapper .question__info {
  padding: 16px 0 !important;
  font-size: 15px !important;
  color: #4a5568 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

.tax-2026-areas-of-life .section__wrapper .question__info img,
.tax-2026-areas-of-life .tip__wrapper .question__info img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Footer buttons on sub-category/tip pages — keep visible, center them */
.tax-2026-areas-of-life .section__wrapper .question__footer,
.tax-2026-areas-of-life .tip__wrapper .question__footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 0 0 !important;
}

/* Hide "Your Previous Answers" on sub-category/tip pages (no answers to show) */
.tax-2026-areas-of-life .section__wrapper .question__related,
.tax-2026-areas-of-life .tip__wrapper .question__related {
  display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  .tax-2026-areas-of-life .question__wrapper {
    padding: 20px !important;
  }
  .tax-2026-areas-of-life .question__footer .question__related {
    padding: 12px 14px !important;
  }
  .tax-2026-areas-of-life .question__buttons {
    gap: 8px !important;
  }
}

/* Fix: Previous Answers box hanging over card border */
.tax-2026-areas-of-life .question__wrapper .question__footer {
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}


/* Done button (question__next) - larger and GMP blue */
.tax-2026-areas-of-life .question__buttons .question__next {
  width: 52px !important;
  height: 52px !important;
  background: #00dffc !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 223, 252, 0.35) !important;
  transition: all 0.2s ease !important;
}
.tax-2026-areas-of-life .question__buttons .question__next:hover {
  background: #00c4e0 !important;
  box-shadow: 0 4px 14px rgba(0, 223, 252, 0.45) !important;
  transform: scale(1.05) !important;
}
.tax-2026-areas-of-life .question__buttons .question__next svg,
.tax-2026-areas-of-life .question__buttons .question__next i,
.tax-2026-areas-of-life .question__buttons .question__next::before {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}


/* Hide delete/reset button */
.tax-2026-areas-of-life .question__buttons .question__reset {
  display: none !important;
}