/* ===========================================================
   HOURLY TO SALARY CALCULATOR - TOOL APP CSS  (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/hourlytosalary/hourlytosalarytool.css
   Loads BEFORE hourlytosalary.css. Never merge the two files.
   Prefix: hts- (hourly-to-salary), the page's registered prefix in
   SALARY-CALCULATORS-SILO.txt s.9d. Never renamed, the page is live.

   COPIED, NOT AUTHORED. Derived from the live posttaxtool.css fetched
   24 Aug 2026, with every donor prefix string renamed to hts-. That file is
   itself built on the silo's green accent #10B981 and the tool-build
   tokens, so copying it is what keeps every calculator in this silo
   looking identical. Blocks DELETED because this page does not use
   them, rather than left as dead rules:
     row-ctc, row-earn, row-deduct   this tool has no earnings or
                                     deductions table
     slab-active, slab-zero          this tool walks no tax slabs
     meta-deduct                     no deduction figure in the banner
   Blocks CHANGED, both recorded in the ADDITIONS block at the end:
     grid-3 became grid-4            this calculator takes four inputs,
                                     not three
     row-active added                table 3 shows both models and marks
                                     the one the reader selected

   INPUT FIELD RULES, s.9a: prefix icon at left 14px with 44px of left
   padding reserved on the input, and native number spinners hidden.
   Both carried over from the donor unchanged.

   Zero em dashes and en dashes, including in these comments.
   =========================================================== */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

/* Row states */

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


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


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

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

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

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

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

/* ═══════════════════════════════════════════════════════════
   ADDITIONS ONLY - rules above this line came from the donor
   and are never edited. Everything below is specific to
   /salary-calculators/post-tax-salary/.
   ═══════════════════════════════════════════════════════════ */

/* ── 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. They live in
   the TOOL file, not the widget file, because the H1 and the hero markup
   ship inside posttaxcalculator.html. Zero class overlap with posttax.css. */
.hts-hero {
  text-align: center;
  padding: 48px 20px 28px;
  max-width: 860px;
  margin: 0 auto;
}

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

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

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

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

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

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

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

/* ── SLAB ROW STATES (set by posttaxtool.js on each tr) ──
   hts-slab-active  a slab the salary actually reaches
   hts-slab-zero    a slab above the salary, shown greyed for context */


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

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

/* ── NARROW PHONES: let the two-column tables fit without scrolling ──
   The donor sets .hts-table min-width 340px, which is 1px wider than
   the content column on a 375px phone, so even the two-column Step and
   Component tables scrolled. The four-column slab table still scrolls
   on its own content width, which is correct and expected. */
@media (max-width: 480px) {
  .hts-table { min-width: 288px; }
}

/* ===========================================================
   ADDITIONS ONLY - rules above this line came from the donor
   posttaxtool.css and are never edited. Everything below is
   specific to /salary-calculators/hourly-to-salary/.
   =========================================================== */

/* -- FOUR INPUTS, NOT THREE.
      The donor calculator takes salary, basis and other deductions.
      This one takes hourly rate, hours per week, days per week and
      the conversion model, so the grid carries four columns at
      desktop, two at 768 and one at 480. -- */
@media (max-width: 900px) {
  .hts-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* -- TABLE 3 MARKS THE SELECTED MODEL.
      Both models are printed on every result so neither is ever read
      alone. This row style says which one the reader picked, without
      hiding the other. -- */
.hts-row-active td {
  color: #E6EDF6;
  background: rgba(16, 185, 129, 0.07);
  font-weight: 600;
}

.hts-row-active td:first-child {
  box-shadow: inset 3px 0 0 #10B981;
}