/* ===========================================================
   CTC TO IN-HAND SALARY CALCULATOR - TOOL APP CSS  (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/ctctoinhand/ctctoinhandtool.css
   Prefix: ctc- (ctc-to-in-hand-salary)
   Site Design System: Dark #0A0F1C | Green Silo #10B981
   Font: DM Sans (matches site)
   Loads BEFORE ctctoinhand.css. Never merge the two.

   Built from the live salary-breakup tool half so every calculator in
   this silo renders identically: tokens, spacing, buttons, tables and
   the hero are carried across unchanged with the prefix renamed. The
   toggle-switch, row-ctc and copy-button components are dropped because
   this page does not use them. Everything genuinely new to this page
   sits in the ADDITIONS block at the end of this file.

   INPUT FIELD RULES, s.9a, carried and not re-derived:
     input left padding 44px so the rupee icon clears the digits
     native number spinners hidden on webkit and gecko
   =========================================================== */

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

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

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

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

.ctc-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;
}

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

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

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

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

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

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

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

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

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

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

.ctc-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;
}

.ctc-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. */
.ctc-input::-webkit-outer-spin-button,
.ctc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ctc-input[type="number"] { -moz-appearance: textfield; }

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

.ctc-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;
}

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

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

.ctc-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;
}

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

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

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

.ctc-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;
}

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

/* Error */
.ctc-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;
}

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

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

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

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

/* View toggle */
.ctc-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;
}

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

.ctc-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;
}

.ctc-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;
}

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

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

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

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

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

.ctc-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;
}

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

.ctc-meta-deduct { color: #F87171; }

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

.ctc-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;
}

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

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

.ctc-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);
}

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

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

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

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

/* Row dots and row states */
.ctc-row-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

.ctc-dot-green  { background: #10B981; }
.ctc-dot-red    { background: #F87171; }
.ctc-dot-blue   { background: #3B82F6; }
.ctc-dot-orange { background: #F59E0B; }

.ctc-row-earn td { color: #C8D8E8; }

.ctc-row-sub td {
  background: rgba(59,130,246,0.06);
  color: #93C5FD;
  font-weight: 700;
  border-top: 1px solid rgba(59,130,246,0.2);
}

.ctc-row-deduct td { color: #F87171; }

.ctc-row-total td {
  background: rgba(16,185,129,0.07);
  color: #10B981;
  font-weight: 700;
  border-top: 1px solid rgba(16,185,129,0.2);
}

.ctc-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 */
.ctc-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

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

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


/* ═══════════════════════════════════════════════════════════
   ADDITIONS - the page hero, moved up from widget 01, 22 Aug 2026
   PAGE ASSEMBLY ORDER puts the tool app in container 1, so the
   breadcrumb, the badge, the page's ONE H1, the hero sub and the
   tags all live in salarybreakupcalculator.html now. These rules are
   the widget-half hero rules renamed to tool-half names, values
   unchanged, so the render is identical. The originals are archived
   in REMOVED-from-salarybreakup-css.txt.
   ═══════════════════════════════════════════════════════════ */

.ctc-tool-hero {
  text-align: center;
  padding: 48px 20px 28px;
  max-width: 860px;
  margin: 0 auto;
}

.ctc-tool-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;
}

.ctc-tool-h1 {
  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;
}

.ctc-tool-h1 span { color: #10B981; }

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

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

.ctc-tool-tag {
  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;
}

/* Inline links inside the hero paragraph. Named ptsc-style, tool half,
   so this file and salarybreakup.css never style the same class.
   .ctc-link keeps serving widgets 01, 04, 05, 06, 07 and 10. */
.ctc-tool-link {
  color: #10B981 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(16,185,129,0.3);
  transition: color 0.2s, border-color 0.2s;
}

.ctc-tool-link:hover {
  color: #34D399 !important;
  border-bottom-color: #34D399;
}

@media (max-width: 768px) {
  .ctc-tool-hero { padding: 36px 18px 22px; }
}

@media (max-width: 480px) {
  .ctc-tool-hero  { padding: 28px 16px 18px; }
  .ctc-tool-badge { font-size: 13px; padding: 6px 14px; }
  .ctc-tool-tag   { font-size: 13px; padding: 6px 12px; }
}


/* ===========================================================
   ADDITIONS ONLY - components this page introduces
   Nothing above this line is edited. Every rule below exists
   because the CTC page carries a control or an output block that
   the salary-breakup reference does not have.
   =========================================================== */

/* -- two-column field grid (CTC + state) -- */
.ctc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

/* -- percentage inputs: no icon, a trailing % marker instead -- */
.ctc-pct-wrap .ctc-input { padding-left: 14px; padding-right: 40px; }

.ctc-pct-suffix {
  position: absolute;
  right: 14px;
  font-size: 14px;
  color: #5A7090;
  pointer-events: none;
}

/* -- regime radio cards -- */
.ctc-regime-group { margin-bottom: 20px; }

.ctc-regime-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ctc-regime-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 14px 16px;
  background: rgba(10,15,28,0.6);
  border: 1px solid rgba(55,75,100,0.4);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.ctc-regime-option:hover { border-color: rgba(16,185,129,0.45); }

.ctc-regime-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.ctc-regime-active {
  border-color: #10B981;
  background: rgba(16,185,129,0.08);
}

.ctc-regime-option:focus-within {
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}

.ctc-regime-icon { font-size: 22px !important; flex-shrink: 0; }

.ctc-regime-text { display: flex; flex-direction: column; gap: 2px; }

.ctc-regime-text strong {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.ctc-regime-text small {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #5A7090;
  line-height: 1.4;
}

/* -- old-regime-only field, revealed by the engine -- */
.ctc-old-only { display: none; }
.ctc-old-only.ctc-visible { display: flex; margin-bottom: 20px; }

/* -- the disclaimer under the buttons -- */
.ctc-disclaimer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(55,75,100,0.25);
  font-size: 13px;
}

/* -- results: the generated tables container -- */
.ctc-result-tables { margin-top: 4px; }

.ctc-table-caption {
  caption-side: top;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #5A7090;
  line-height: 1.5;
  padding: 0 0 10px;
}

.ctc-table-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #5A7090;
  line-height: 1.6;
  margin: 10px 0 0;
}

/* Slab bands the income never reaches. Showing them greyed rather than
   hiding them is the point of the table: a reader learns more from
   seeing the 30 percent band sit untouched than from a paragraph about
   progressivity. */
.ctc-row-untouched td,
.ctc-row-untouched th { color: #374B64; }

.ctc-row-muted td,
.ctc-row-muted th { color: #374B64; }

/* -- the surcharge notice, the honesty contract in the result -- */
.ctc-surcharge { display: none; }

.ctc-surcharge.ctc-visible {
  display: block;
  margin-bottom: 20px;
  padding: 16px 18px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.35);
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #C8D8E8;
  line-height: 1.7;
}

.ctc-surcharge strong { color: #F59E0B; }

/* -- the generated case line under the explanation -- */
.ctc-explanation-case {
  margin: 10px 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #8899AA;
  line-height: 1.7;
}

/* -- the regime comparison block -- */
.ctc-compare {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(55,75,100,0.35);
  background: rgba(10,15,28,0.5);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #8899AA;
  line-height: 1.7;
}

.ctc-compare strong { color: #C8D8E8; }

.ctc-compare-win {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.06);
}
.ctc-compare-win strong { color: #10B981; }

.ctc-compare-lose {
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.06);
}
.ctc-compare-lose strong { color: #60A5FA; }

.ctc-compare-even strong { color: #C8D8E8; }

/* -- responsive -- */
@media (max-width: 768px) {
  .ctc-grid-2 { grid-template-columns: 1fr; }
  .ctc-regime-toggle { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ctc-regime-option { padding: 12px 14px; }
  .ctc-table-caption { font-size: 12px; }
  .ctc-surcharge.ctc-visible { padding: 14px 15px; }
  .ctc-compare { padding: 14px 15px; }
}

/* -- JS BINDING HOOKS --------------------------------------------------
   These classes exist so the engine can find an element. They carry no
   paint of their own: every one of them sits alongside a styled class in
   the markup (for example .ctc-result-value .ctc-res-monthly-inhand). They
   are declared here rather than left undeclared so the class-coverage
   check stays a real gate: an undeclared ctc- class in this page's markup
   means somebody forgot a rule, not that a hook is doing its job.
   Changing any name here breaks the engine. See ctctoinhandtool.js. */
.ctc-in-ctc,
.ctc-in-basic,
.ctc-in-pf-employee,
.ctc-in-pf-employer,
.ctc-in-state,
.ctc-in-other-deductions,
.ctc-in-regime,
.ctc-res-monthly-inhand,
.ctc-res-annual-inhand,
.ctc-res-gross-m,
.ctc-res-deduct-m,
.ctc-res-effective,
.ctc-res-share { font-family: inherit; }

/* -- ROW HEADERS ARE NOT COLUMN HEADERS.
   The donor rule styles every th uppercase, which is right for the
   column strip. This page's result tables use th[scope="row"] for the
   first column so screen readers announce each row's label with its
   figures, and those labels are full sentences ("Less professional tax,
   section 16(iii)"). Uppercasing a sentence makes it hard to read and
   the letter-spacing widens it enough to force a scrollbar on narrow
   screens. Column headers keep the donor treatment untouched. */
.ctc-table th[scope="row"] {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: #8899AA;
}

.ctc-table tbody tr.ctc-row-earn th[scope="row"],
.ctc-table tbody tr.ctc-row-sub th[scope="row"],
.ctc-table tbody tr.ctc-row-total th[scope="row"] {
  color: #C8D8E8;
  font-weight: 700;
}

.ctc-table tbody tr.ctc-row-untouched th[scope="row"] { color: #374B64; }