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

   COPIED, NOT AUTHORED. Derived from the silo reference
   salarybreakuptool.css, fetched live 22 Aug 2026, with every donor
   class prefix renamed to ihs-. Donor components this page does not use
   were DELETED rather than left as dead rules:
     the monthly/annual switch   this tool prints both columns at once
     the row dots                the three result tables read better
                                 without them, same choice as posttax
     the plain earnings row      every row on this page is either a
                                 subtotal, a deduction or a total
   Anything genuinely new sits in the ADDITIONS ONLY block at the end.
   Rules above that block are never edited.

   Input rules kept from the donor and not negotiable: 44px left
   padding so the rupee icon clears the digits, and native number
   spinners hidden.
   ═══════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Result banner */
.ihs-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Row states */
.ihs-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);
}

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

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

.ihs-row-ctc td {
  background: rgba(245,158,11,0.06);
  color: #FCD34D;
  font-weight: 700;
  border-top: 1px solid rgba(245,158,11,0.2);
}

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

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

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

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

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

/* ═══════════════════════════════════════════════════════════
   ADDITIONS ONLY - rules above this line came from the donor
   salarybreakuptool.css and are never edited. Everything below is
   specific to /salary-calculators/in-hand-salary-calculator/.
   ═══════════════════════════════════════════════════════════ */

/* ── HERO (tool half, because the page's one H1 lives here) ──
   Values copied from the donor widget stylesheet salarybreakup.css so
   the hero renders identically to the silo reference page and to
   /salary-calculators/post-tax-salary/. They live in the TOOL file,
   not the widget file, because the H1 and the hero markup ship inside
   inhandsalarycalculator.html, which is container 1. Zero class
   overlap with inhandsalary.css. */
.ihs-hero {
  text-align: center;
  padding: 48px 20px 28px;
  max-width: 860px;
  margin: 0 auto;
}

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

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

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

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

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

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

/* Inline links inside the hero paragraph. Named ihs-hero-link, not
   ihs-link, so the tool half and the widget half never style the same
   class. !important beats the Elementor kit link colour. */
.ihs-hero-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;
}

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

/* ── TAX REGIME TOGGLE ──
   Carried forward from the live inhandsalary.css, where these values
   were already proven on this page. The radio itself is hidden and the
   whole label is the target, so the tap area is the full 56px card
   rather than a 16px circle. */
.ihs-regime-group { margin-bottom: 24px; }

.ihs-regime-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

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

.ihs-regime-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ihs-regime-option:hover {
  border-color: rgba(16,185,129,0.4);
  background: rgba(16,185,129,0.04);
}

.ihs-regime-option:focus-within {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
}

.ihs-regime-active {
  border-color: rgba(16,185,129,0.5);
  background: rgba(16,185,129,0.08);
  box-shadow: 0 0 0 1px rgba(16,185,129,0.2);
}

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

.ihs-regime-text strong {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 2px;
}

.ihs-regime-text small {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
}

/* ── SLAB ROW STATES (set by inhandsalarytool.js on each tr) ──
   ihs-slab-active  a band the taxable income actually reaches
   ihs-slab-zero    a band above it, shown greyed rather than hidden,
                    because seeing the 30% band sitting untouched
                    teaches progressivity better than a sentence can */
.ihs-table tbody tr.ihs-slab-active td {
  color: #C8D8E8;
  font-weight: 600;
  background: rgba(16,185,129,0.05);
}

.ihs-table tbody tr.ihs-slab-zero td { color: #374B64; }
.ihs-table tbody tr.ihs-slab-zero:hover td { background: rgba(55,75,100,0.06); }

/* ── TWO MORE ROW STATES the donor does not carry ──
   ihs-row-taxable  the line where table 1 lands, a blue subtotal like
                    the donor's row-sub but closing the table
   ihs-row-tax      total income tax, the figure most readers came for */
.ihs-row-taxable td {
  background: rgba(59,130,246,0.10);
  color: #93C5FD;
  font-weight: 700;
  border-top: 1px solid rgba(59,130,246,0.28);
}

.ihs-row-tax td {
  background: rgba(248,113,113,0.08);
  color: #FCA5A5;
  font-weight: 700;
  border-top: 1px solid rgba(248,113,113,0.25);
}

/* ── TABLE SUB-LABELS ──
   ihs-table-note   the regime name sitting inside a table heading
   ihs-slab-caption the line under the slab heading naming the exact
                    taxable figure the walk was run on, so the table
                    is checkable rather than decorative */
.ihs-table-note {
  font-weight: 400;
  color: #5A7090;
}

.ihs-slab-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
  line-height: 1.5;
  margin: 0 0 10px;
}

/* ── THE GENERATED EXPLANATION ──
   Paragraphs inside .ihs-explanation, written by the engine from the
   result. ihs-explain-warn marks the honest-limit lines. */
.ihs-explain-line {
  margin: 0 0 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #8899AA;
}

.ihs-explain-line:last-child { margin-bottom: 0; }
.ihs-explain-line strong { color: #C8D8E8; }

.ihs-explain-warn {
  color: #FCD34D;
  padding-top: 10px;
  border-top: 1px solid rgba(245,158,11,0.2);
}

/* ── HERO AND TOGGLE RESPONSIVE ── */
@media (max-width: 768px) {
  .ihs-hero { padding: 36px 18px 22px; }
}

@media (max-width: 560px) {
  .ihs-regime-toggle { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ihs-hero { padding: 28px 16px 18px; }
  .ihs-hero-badge { font-size: 13px; padding: 6px 14px; }
  .ihs-htag { font-size: 13px; padding: 6px 12px; }
  /* The donor sets .ihs-table min-width 340px, which is wider than the
     content column on a 375px phone, so even the two-column tables
     scrolled. The four-column slab table still scrolls on its own
     content width, which is correct and expected. */
  .ihs-table { min-width: 288px; }
}