/* ═══════════════════════════════════════════════════════════
   TAKE-HOME SALARY CALCULATOR (INDIA) - TOOL APP CSS  (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/takehome/takehometool.css
   Prefix: th- (registered in SALARY-CALCULATORS-SILO.txt section 9d)
   Site Design System: Dark #0A0F1C | Green Silo #10B981
   Font: DM Sans (matches site)
   Loads BEFORE takehome.css. Never merge the two.
   Design tokens copied from salarybreakuptool.css, the silo
   reference implementation, so every calculator in this silo looks
   the same. Both section 9a input field rules are carried over:
   44px left padding for the prefix icon, native number spinners
   hidden.
   ZERO class overlap with takehome.css. The hero classes here are
   th-calc-hero / th-calc-badge / th-calc-h1 / th-calc-hero-sub /
   th-calc-tag, all distinct from the widget half's names on purpose.
   CORRECTED 22 Aug 2026: th-calc-badge added. The silo badge used to
   sit in widget 01 as .th-hero-badge, and widget 01 is container 2,
   below the calculator, so the page header furniture rendered under
   the tool. The badge belongs in container 1 with the H1.
   ═══════════════════════════════════════════════════════════ */

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

/* ── TOOL HERO. The page's ONE H1 lives here. ── */
.th-calc-hero {
  text-align: center;
  padding: 8px 0 28px;
}

/* Silo badge. Values copied verbatim from the .th-hero-badge rule that
   used to live in takehome.css, so the render is unchanged. That rule
   is deleted from that file. */
.th-calc-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;
}

.th-calc-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;
}

.th-calc-h1 span { color: #10B981; }

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

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

.th-calc-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Section 9a input rule 1: 44px left padding is the floor, so the
   rupee icon never crowds the typed value. */
.th-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;
}

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

/* Section 9a input rule 2: no native number spinners. Arrow keys
   still step the value; typing stays the primary path. */
.th-input::-webkit-outer-spin-button,
.th-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.th-input[type="number"] { -moz-appearance: textfield; }

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

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

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

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

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

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

.th-btn-calc:active { transform: scale(0.98); }
.th-btn-calc:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }

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

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

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

/* ── ERROR ── */
.th-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;
}

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

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

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

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

.th-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.th-toggle-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #8899AA;
}

.th-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.th-switch input { opacity: 0; width: 0; height: 0; }

.th-slider {
  position: absolute;
  inset: 0;
  background: rgba(55,75,100,0.5);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s;
}

.th-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 4px;
  top: 4px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.25s;
}

.th-switch input:checked + .th-slider { background: #10B981; }
.th-switch input:checked + .th-slider::before { transform: translateX(24px); }
.th-switch input:focus-visible + .th-slider {
  box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
}

.th-toggle-help {
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  margin-top: 8px;
}

/* ── RESULT BANNER ── */
.th-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;
}

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

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

.th-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;
  font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

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

/* ── TABLES ── */
.th-table-section { margin-bottom: 20px; }

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

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

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

.th-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);
  white-space: nowrap;
}

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

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

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

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

.th-row-slab td { color: #C8D8E8; }

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

.th-row-relief td { color: #34D399; }

.th-row-total td {
  background: rgba(248,113,113,0.07);
  color: #F87171;
  font-weight: 700;
  border-top: 1px solid rgba(248,113,113,0.2);
}

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

.th-row-net td small { color: #10B981; opacity: 0.8; }

/* ── EXPLANATION ── */
.th-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: 0 0 20px;
}

/* ── RESULT ACTIONS ── */
.th-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.th-btn-copy,
.th-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;
}

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

.th-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) {
  .th-calc-section { padding: 16px 18px 40px; }
  .th-grid-2 { grid-template-columns: 1fr; }
  .th-form { padding: 20px 18px; }
  .th-calc-header { padding: 20px 18px 16px; }
  .th-results { padding: 0 18px 24px; }
  .th-result-banner { flex-direction: column; }
  .th-result-divider { width: 100%; height: 1px; }
  .th-result-main { padding: 24px 20px 16px; }
  .th-result-meta { padding: 16px 20px 20px; flex-wrap: wrap; }
  .th-meta-item { min-width: 33%; border-right: none; }
  .th-btn-calc { flex: 1 1 100%; }
  .th-btn-clear { flex: 1 1 100%; justify-content: center; }
}

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