/* ===== Tax Calculator — Editorial Design ===== */

.tc-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #334155 70%, #475569 100%);
  padding: 5rem 0 6rem;
}
.tc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 75%, rgba(34,197,94,.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(239,179,0,.06) 0%, transparent 40%);
}
.tc-hero__grid {
  position: absolute; inset: 0; opacity: .03;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 60px 60px;
}
.tc-hero__inner {
  position: relative; z-index: 2;
  max-width: 52rem; margin: 0 auto; padding: 0 1.5rem; text-align: center;
}
.tc-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem 1.1rem; border-radius: 9999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.8);
  margin-bottom: 1.5rem; letter-spacing: .01em;
}
.tc-hero__badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px #22c55e;
  animation: tc-dot-pulse 2s infinite;
}
@keyframes tc-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.tc-hero h1 {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800; color: #fff; line-height: 1.25;
  margin-bottom: 1rem; letter-spacing: -.02em;
}
.tc-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.tc-hero__sub {
  font-size: 1rem; color: rgba(255,255,255,.55);
  max-width: 34rem; margin: 0 auto; line-height: 1.7;
}
.tc-hero__wave {
  position: absolute; bottom: -1px; left: 0; width: 100%;
}

/* ===== Card / Form ===== */
.tc-card {
  background: #fff; border-radius: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 20px 60px -12px rgba(0,0,0,.08);
  border: 1px solid #e5e7eb; overflow: hidden;
  margin-top: -2.5rem; position: relative; z-index: 10;
}
.tc-card__header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid #f3f4f6;
}
.tc-card__header h2 {
  font-size: 1.1rem; font-weight: 800; color: #111827; margin: 0;
  display: flex; align-items: center; gap: .5rem;
}
.tc-card__header p {
  font-size: .82rem; color: #64748b; margin: .35rem 0 0; line-height: 1.5;
}
.tc-card__body {
  padding: 1.25rem 1.5rem;
}

/* Form elements */
.tc-field { margin-bottom: 1.25rem; }
.tc-field label {
  display: block; font-size: .8rem; font-weight: 700;
  color: #374151; margin-bottom: .375rem; letter-spacing: .01em;
}
.tc-field label .tc-hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #e5e7eb; color: #6b7280; font-size: .65rem;
  font-weight: 800; margin-left: .35rem; cursor: help;
  vertical-align: middle; position: relative;
}
.tc-field label .tc-hint-icon::before,
.tc-field label .tc-hint-icon::after {
  position: absolute; opacity: 0; visibility: hidden; transition: all .2s; pointer-events: none; z-index: 100;
}
.tc-field label .tc-hint-icon::before {
  content: ''; bottom: 125%; left: 50%; transform: translateX(-50%) translateY(100%);
  border: 5px solid transparent; border-top-color: #1f2937;
}
.tc-field label .tc-hint-icon::after {
  content: attr(data-tooltip); bottom: 125%; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: .5rem .75rem; border-radius: .5rem;
  font-size: .7rem; font-weight: 500; line-height: 1.4; width: max-content; max-width: 200px;
  text-align: center; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); letter-spacing: normal;
}
.tc-field label .tc-hint-icon:hover::before,
.tc-field label .tc-hint-icon:hover::after {
  opacity: 1; visibility: visible;
}
.tc-field label .tc-hint-icon:hover::before { bottom: 140%; }
.tc-field label .tc-hint-icon:hover::after { bottom: 140%; }
.tc-select, .tc-input {
  width: 100%; padding: .65rem 1rem;
  border: 1.5px solid #e5e7eb; border-radius: .625rem;
  font-size: .95rem; font-weight: 600; color: #111827;
  background: #fff; transition: all .2s; font-family: inherit;
  appearance: none;
}
.tc-select { padding-right: 2.5rem; cursor: pointer; }
.tc-select-wrap {
  position: relative;
}
.tc-select-wrap::after {
  content: '▾'; position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%); color: #9ca3af; pointer-events: none;
  font-size: .8rem;
}
.tc-select:focus, .tc-input:focus {
  outline: none; border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5,150,105,.1);
}
.tc-input-wrap {
  position: relative;
}
.tc-input-wrap .tc-suffix {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%); color: #9ca3af; font-size: .82rem; font-weight: 500;
}
.tc-cost-hint {
  font-size: .75rem; color: #059669; margin-top: .375rem;
  font-style: italic;
}

/* Radio group — pill buttons */
.tc-radios {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.tc-radio {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem; border-radius: .5rem;
  border: 1.5px solid #e5e7eb; background: #fff;
  cursor: pointer; transition: all .2s ease;
  font-size: .85rem; font-weight: 600; color: #4b5563;
  user-select: none; position: relative;
}
.tc-radio:hover { border-color: #a7f3d0; background: #f9fafb; }
.tc-radio input {
  position: absolute; width: 0; height: 0;
  opacity: 0; pointer-events: none; margin: 0;
}
.tc-radio.active {
  border-color: #059669; background: #ecfdf5; color: #047857;
}
.tc-radio.active::before {
  content: '✓';
  font-weight: 800; font-size: .8rem; color: #059669;
  margin-right: .125rem;
}

/* Validation error state */
.tc-field--error .tc-select,
.tc-field--error .tc-input {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}
.tc-field--error .tc-select-wrap::after { color: #ef4444; }
.tc-field-error {
  display: none;
  font-size: .75rem; color: #ef4444; font-weight: 600;
  margin-top: .375rem;
  padding-left: .125rem;
  animation: tc-shake .3s ease;
}
.tc-field--error .tc-field-error { display: block; }
@keyframes tc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Calculate button */
.tc-calc-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .75rem;
  border: none; border-radius: .875rem;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff; font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: all .2s; font-family: inherit;
}
.tc-calc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(5,150,105,.3);
}

/* ===== Results ===== */
.tc-results { display: none; margin-top: 1.5rem; }

.tc-hkd-badge {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem; border-radius: .875rem;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  margin-bottom: 1rem;
}
.tc-hkd-badge__icon {
  width: 2.5rem; height: 2.5rem; border-radius: .625rem;
  background: #059669; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem; flex-shrink: 0;
}
.tc-hkd-badge__text h4 {
  font-size: .9rem; font-weight: 700; color: #065f46; margin: 0 0 .25rem;
}
.tc-hkd-badge__text p {
  font-size: .78rem; color: #059669; margin: 0; line-height: 1.5;
}

/* Result table */
.tc-res-table {
  width: 100%; border-collapse: collapse;
  font-size: .82rem; margin-bottom: 1rem;
}
.tc-res-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #f3f4f6;
}
.tc-res-table td:first-child {
  color: #6b7280; font-weight: 500;
}
.tc-res-table td:last-child {
  text-align: right; font-weight: 700; color: #111827;
}
.tc-res-table tr.tc-res-highlight td {
  border-top: 2px solid #e5e7eb;
  border-bottom: 2px solid #e5e7eb;
  padding: .625rem .75rem;
}
.tc-res-table tr.tc-res-highlight td:last-child {
  color: #dc2626; font-size: .95rem; font-weight: 800;
}

/* Explain toggle */
.tc-explain-toggle {
  display: flex; align-items: center; gap: .375rem;
  background: none; border: none; cursor: pointer;
  font-size: .8rem; font-weight: 600; color: #059669;
  padding: .5rem 0; font-family: inherit;
}
.tc-explain-toggle svg {
  width: 16px; height: 16px; transition: transform .3s;
}
.tc-explain-toggle.open svg { transform: rotate(180deg); }
.tc-explain-wrap {
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
}
.tc-explain-inner {
  padding: .75rem 1rem; background: #f8fafc; border-radius: .75rem;
  font-size: .8rem; color: #475569; line-height: 1.7;
  border: 1px solid #f1f5f9;
}
.tc-explain-inner p { margin: .25rem 0; }
.tc-explain-note {
  margin-top: .75rem !important;
  padding: .625rem .75rem;
  background: #fffbeb; border-radius: .5rem;
  color: #92400e; font-size: .78rem;
  border-left: 3px solid #fbbf24;
}

/* ===== Obligations ===== */
.tc-obligations {
  display: none; margin-top: 2rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1.25rem;
  overflow: hidden;
}
.tc-obl-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f3f4f6;
  background: #f8fafc;
}
.tc-obl-header h3 {
  font-size: 1rem; font-weight: 800; color: #111827;
  margin: 0; display: flex; align-items: center; gap: .5rem;
}
.tc-obl-body { padding: 1.25rem 1.5rem; }
.tc-obl-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 640px) {
  .tc-obl-grid { grid-template-columns: 1fr; }
}
.tc-obl-item h4 {
  font-size: .72rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 .375rem;
}
.tc-obl-item p {
  font-size: .82rem; color: #1e293b; margin: 0;
  font-weight: 500; line-height: 1.5;
}
.tc-obl-links {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid #f3f4f6;
}
.tc-obl-links h4 {
  font-size: .72rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem;
}
.tc-obl-links a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: #059669; font-weight: 600;
  text-decoration: none; margin-right: 1.25rem;
}
.tc-obl-links a:hover { text-decoration: underline; }

/* ===== Legal References — Card Design ===== */
.tc-legal {
  margin-top: 2.5rem;
}
.tc-legal h3 {
  font-size: 1.1rem; font-weight: 800; color: #111827; margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: .5rem;
}
.tc-legal-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.tc-legal-list li {
  padding: .875rem 1rem .875rem 1.125rem;
  font-size: .8rem; color: #374151; line-height: 1.6;
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #059669;
  border-radius: .5rem;
  transition: all .2s;
}
.tc-legal-list li:hover {
  border-left-color: #047857;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  background: #f9fafb;
}
.tc-legal-list li strong {
  color: #111827;
}

/* ===== Reference Tables ===== */
.tc-ref-table-wrap {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #d1d5db;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.tc-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.tc-ref-table thead tr {
  background: #f1f5f9;
}
.tc-ref-table th {
  padding: .875rem .875rem;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
  border-bottom: 2px solid #cbd5e1;
  font-size: .78rem;
  letter-spacing: .01em;
}
.tc-ref-table th:first-child {
  text-align: left;
}
.tc-ref-table td {
  padding: .75rem .875rem;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}
.tc-ref-table td:first-child {
  font-weight: 600; color: #1e293b;
}
.tc-ref-table tbody tr:hover {
  background: #f8fafc;
}
.tc-ref-table tbody tr:nth-child(even) {
  background: #fafbfc;
}
.tc-ref-table tbody tr:nth-child(even):hover {
  background: #f1f5f9;
}
.tc-ref-table .tc-cell-center {
  text-align: center; font-weight: 700;
}
.tc-ref-table .tc-cell-green { color: #059669; }
.tc-ref-table .tc-cell-amber { color: #d97706; }
.tc-ref-table .tc-cell-red { color: #dc2626; }
.tc-ref-table .tc-cell-blue { color: #1d4ed8; }
.tc-ref-badge {
  display: inline-block;
  padding: .2rem .625rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: .75rem;
}
.tc-ref-badge--green { background: #dcfce7; color: #166534; }
.tc-ref-badge--amber { background: #fef3c7; color: #92400e; }

/* Group header cells */
.tc-group-header {
  padding: .75rem .625rem !important;
  text-align: center !important;
  vertical-align: top;
}
.tc-group-header__name {
  font-size: .82rem; font-weight: 800;
  margin-bottom: .15rem;
}
.tc-group-header__desc {
  font-size: .65rem; font-weight: 500;
  opacity: .7; line-height: 1.3;
}

/* Obligation summary table */
.tc-obl-table td {
  font-size: .76rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}

/* ===== FAQ ===== */
.tc-faq { margin-top: 3rem; }
.tc-faq h2 {
  font-size: 1.35rem; font-weight: 800; color: #111827;
  text-align: center; margin-bottom: 1.5rem;
}
.tc-faq-item {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: .875rem; margin-bottom: .625rem;
  overflow: hidden; transition: border-color .2s;
}
.tc-faq-item:hover { border-color: #a7f3d0; }
.tc-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; cursor: pointer;
  font-weight: 700; font-size: .85rem; color: #1e293b;
  background: none; border: none; width: 100%;
  text-align: left; font-family: inherit;
}
.tc-faq-q svg {
  flex-shrink: 0; width: 1.125rem; height: 1.125rem;
  color: #94a3b8; transition: transform .3s;
}
.tc-faq-item.open .tc-faq-q svg { transform: rotate(180deg); }
.tc-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
}
.tc-faq-a__inner {
  padding: 0 1.25rem 1rem; font-size: .82rem;
  color: #64748b; line-height: 1.7;
}

/* Footnote */
.tc-footnote {
  margin-top: 2.5rem; padding: 1.25rem;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: .875rem; font-size: .78rem;
  color: #92400e; line-height: 1.6; text-align: center;
}

/* Flive CTA in results */
.tc-flive-tip {
  margin-top: 1.25rem; padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 1px solid #fde68a; border-radius: .875rem;
}
.tc-flive-tip p {
  font-size: .82rem; color: #78350f; margin: 0 0 .5rem; line-height: 1.6;
}
.tc-flive-tip a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700; color: #d97706;
  text-decoration: none;
}
.tc-flive-tip a:hover { text-decoration: underline; }

/* Animations */
.tc-animate {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.tc-animate.tc-visible {
  opacity: 1; transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .tc-hero { padding: 3rem 0 4.5rem; }
  .tc-card__body { padding: 1.25rem; }
  .tc-radios { flex-direction: column; }
  .tc-res-table { font-size: .78rem; }
  .tc-ref-table { font-size: .72rem; }
  .tc-ref-table th, .tc-ref-table td { padding: .5rem .4rem; }
  .tc-legal-list li { padding: .75rem .875rem .75rem 1rem; font-size: .76rem; }
}