/* ═══════════════════════════════════════════════════════════
   INCOME TAX CALCULATOR - TOOL APP CSS  (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/incometax/incometaxtool.css
   Prefix: itc- (income-tax-calculator)
   Site Design System: Dark #0A0F1C | Green Silo #10B981
   Font: DM Sans (matches site)
   Loads BEFORE incometax.css. Never merge the two.

   COPIED, NOT AUTHORED. Every rule below is the live
   salarybreakuptool.css of 21 Aug 2026 with sbc- renamed to itc-,
   so this calculator renders identically to the silo reference.
   Two deliberate differences, both recorded in
   RANK-MATH-SEO-income-tax-calculator.txt:
     1. The HERO block is carried here from the donor WIDGET
        stylesheet, because the page's one H1 lives in the tool
        app file, not in widget 01. Same rules, same rendering.
     2. The monthly / annual view toggle and the row-dot set are
        dropped, because this tool has neither. No leftover
        classes from the donor.
   Input rules from the 21 Aug 2026 gap fix are kept as they are:
   44px left padding for the prefix icon, native number spinners
   hidden.
   ═══════════════════════════════════════════════════════════ */

/* ── HERO (tool app file, carries the page H1) ── */
.itc-hero {
  text-align: center;
  padding: 48px 20px 28px;
  max-width: 860px;
  margin: 0 auto;
}

.itc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
  color: #10B981;
  font-family: 'DM Sans', sans-serif;
  margin-bottom: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.itc-hero-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 14px;
  line-height: 1.2;
}

.itc-hero-title span { color: #10B981; }

.itc-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #8899AA;
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

.itc-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.itc-htag {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #10B981;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: 8px;
  padding: 6px 14px;
}



/* ── CALCULATOR SECTION ── */
.itc-calc-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 20px 48px;
}

.itc-calc-card {
  background: #111B2E;
  border: 1px solid rgba(55,75,100,0.3);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

/* Green top accent */
.itc-calc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10B981, #34D399, #059669);
}

/* Card Header */
.itc-calc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 32px 20px;
  border-bottom: 1px solid rgba(55,75,100,0.2);
}

.itc-calc-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(16,185,129,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px !important;
  flex-shrink: 0;
}

.itc-calc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.itc-calc-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  line-height: 1.6;
}

/* ── FORM ── */
.itc-form {
  padding: 28px 32px;
}

.itc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.itc-field-group {
  display: flex;
  flex-direction: column;
}

.itc-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #C8D8E8;
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.itc-label-unit {
  color: #5A7090;
  font-weight: 400;
}

.itc-field-hint {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  margin-top: 5px;
  line-height: 1.5;
}

.itc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.itc-input-icon {
  position: absolute;
  left: 14px;
  font-size: 14px !important;
  color: #5A7090;
  pointer-events: none;
  z-index: 1;
}

.itc-input {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px 12px 44px;
  background: rgba(10,15,28,0.6);
  border: 1px solid rgba(55,75,100,0.4);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.itc-input::placeholder { color: #374B64; }

/* Native number spinners clash with the dark theme. Hidden 21 Aug 2026.
   Arrow keys still step the value; typing is the primary path. */
.itc-input::-webkit-outer-spin-button,
.itc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.itc-input[type="number"] { -moz-appearance: textfield; }

.itc-input:focus {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
  background: rgba(16,185,129,0.04);
}

.itc-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A7090' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.itc-select option {
  background: #111B2E;
  color: #FFFFFF;
}

/* ── BUTTONS ── */
.itc-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.itc-btn-calc {
  flex: 1;
  min-width: 200px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #10B981;
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
}

.itc-btn-calc:hover {
  background: #0EA573;
  box-shadow: 0 8px 24px rgba(16,185,129,0.3);
  transform: translateY(-1px);
}

.itc-btn-calc:active { transform: scale(0.98); }

.itc-btn-icon { font-size: 16px !important; }

.itc-btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  background: transparent;
  border: 1px solid rgba(55,75,100,0.4);
  color: #8899AA;
  padding: 14px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}

.itc-btn-clear:hover {
  border-color: rgba(239,68,68,0.4);
  color: #F87171;
  background: rgba(239,68,68,0.06);
}

/* Error */
.itc-error {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FCA5A5;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 10px;
  text-align: center;
}

.itc-error.itc-visible { display: block; }

/* ── RESULTS ── */
.itc-results {
  display: none;
  padding: 0 32px 32px;
  border-top: 1px solid rgba(55,75,100,0.2);
}

.itc-results.itc-visible {
  display: block;
  animation: itc-fade-up 0.5s ease-out;
}

@keyframes itc-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Result banner */
.itc-result-banner {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.05) 100%);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 16px;
  margin: 24px 0;
  overflow: hidden;
}

.itc-result-main {
  padding: 28px 32px;
  text-align: center;
  flex-shrink: 0;
}

.itc-result-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5A7090;
  margin-bottom: 8px;
}

.itc-result-value {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  color: #10B981;
  line-height: 1;
  letter-spacing: -1px;
}

.itc-result-annual {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  margin-top: 6px;
}

.itc-result-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(55,75,100,0.3);
}

.itc-result-meta {
  display: flex;
  flex: 1;
  padding: 20px 28px;
}

.itc-meta-item {
  flex: 1;
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid rgba(55,75,100,0.2);
}

.itc-meta-item:last-child { border-right: none; }

.itc-meta-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5A7090;
  margin-bottom: 6px;
}

.itc-meta-value {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #C8D8E8;
}

/* ── TABLE ── */
.itc-table-section { margin-bottom: 20px; }

.itc-table-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #C8D8E8;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.itc-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(55,75,100,0.3);
}

.itc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  min-width: 340px;
}

.itc-table th {
  background: rgba(10,15,28,0.6);
  color: #8899AA;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(55,75,100,0.3);
}

.itc-table td {
  padding: 12px 16px;
  color: #C8D8E8;
  border-bottom: 1px solid rgba(55,75,100,0.15);
  vertical-align: middle;
}

.itc-table tbody tr:last-child td { border-bottom: none; }
.itc-table tbody tr:hover td { background: rgba(55,75,100,0.1); }

.itc-table th.itc-amount,
.itc-table td.itc-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.itc-table td small {
  display: block;
  font-size: 14px;
  color: #5A7090;
  margin-top: 2px;
  line-height: 1.4;
}

/* Explanation box */
.itc-explanation {
  background: rgba(16,185,129,0.06);
  border: 1px solid rgba(16,185,129,0.2);
  border-left: 4px solid #10B981;
  border-radius: 10px;
  padding: 16px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #8899AA;
  margin-bottom: 20px;
}

/* Result actions */
.itc-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.itc-btn-copy,
.itc-btn-clear-results {
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(55,75,100,0.4);
  color: #5A7090;
  padding: 10px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s;
}

.itc-btn-copy:hover {
  border-color: rgba(16,185,129,0.5);
  color: #10B981;
  background: rgba(16,185,129,0.06);
}

.itc-btn-clear-results:hover {
  border-color: rgba(239,68,68,0.4);
  color: #F87171;
  background: rgba(239,68,68,0.06);
}

/* ── RESPONSIVE 768 ── */
@media (max-width: 768px) {
  .itc-grid-3 { grid-template-columns: 1fr; }
  .itc-form { padding: 20px 18px; }
  .itc-calc-header { padding: 20px 18px 16px; }
  .itc-results { padding: 0 18px 24px; }
  .itc-result-banner { flex-direction: column; }
  .itc-result-divider { width: 100%; height: 1px; }
  .itc-result-main { padding: 24px 20px 16px; }
  .itc-result-meta { padding: 16px 20px 20px; flex-wrap: wrap; }
  .itc-meta-item { min-width: 33%; border-right: none; }
  .itc-btn-calc { flex: 1 1 100%; }
  .itc-btn-clear { flex: 1 1 100%; justify-content: center; }
}

/* ── RESPONSIVE 480 ── */
@media (max-width: 480px) {
  .itc-calc-section { padding: 14px 16px 36px; }
  .itc-calc-icon { width: 44px; height: 44px; font-size: 22px !important; }
  .itc-calc-title { font-size: 18px; }
  .itc-table th, .itc-table td { padding: 10px 12px; font-size: 14px; }
  .itc-result-main { padding: 20px 16px 14px; }
  .itc-result-meta { padding: 14px 16px 18px; }
  .itc-meta-item { min-width: 50%; padding: 6px; }
  .itc-result-actions { flex-direction: column; }
  .itc-btn-copy, .itc-btn-clear-results { width: 100%; }
}


/* ══════════════════════════════════════════════════════════
   ADDITIONS ONLY - rules above this line are the donor's and
   are never edited. Everything below exists because this tool
   has controls the donor does not.
   ══════════════════════════════════════════════════════════ */

/* Single-column field row, used by the old regime deductions field */
.itc-grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* The deductions row is hidden while the new regime is selected */
.itc-grid-1.itc-hidden { display: none; }

/* Rate column in the slab working table */
.itc-table th.itc-rate,
.itc-table td.itc-rate {
  text-align: center;
  color: #10B981;
  font-weight: 600;
  white-space: nowrap;
}

.itc-table tr.itc-row-nil td { color: #5A7090; }
.itc-table tr.itc-row-nil td.itc-rate { color: #5A7090; }

/* Additive lines: surcharge and cess */
.itc-row-add td {
  color: #FCD34D;
  background: rgba(245,158,11,0.05);
}

/* Monthly TDS figure in the result banner */
.itc-meta-month { color: #93C5FD; }

/* The summary table has no header row, so its first row needs the
   same top edge the donor's thead supplies. */
.itc-table tbody tr:first-child td { border-top: none; }

@media (max-width: 768px) {
  .itc-grid-1 { margin-bottom: 16px; }
}