/* ═══════════════════════════════════════════════════════════
   SALARY TO HOURLY CALCULATOR - TOOL APP CSS  (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/salarytohourly/salarytohourlytool.css
   Prefix: sth- (salary-to-hourly)
   Site Design System: Dark #0A0F1C | Green Silo #10B981
   Font: DM Sans
   Loads BEFORE salarytohourly.css. Never merge the two.

   COPIED, NOT AUTHORED. Derived from the silo reference
   salarybreakuptool.css, fetched live 24 Aug 2026
   (md5 b30e6e62725ac559c73565abd669b9e9), with every donor
   prefix string renamed to sth-. Two donor blocks were DELETED because this page
   does not use them, rather than left as dead rules:
     the view toggle   this page has no monthly and annual switch,
                       the salary type is a select in the form
     the row dots      this tool prints rates, not component rows
     meta-deduct       nothing on this page is a deduction, so the red
                       banner state has no user
   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 required by s.9a INPUT FIELD
   RULES: 44px left padding so the rupee icon clears the digits, and
   native number spinners hidden.
   ═══════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Row states */
.sth-row-earn td { color: #C8D8E8; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sth-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 and the field hints. Named
   sth-tool-link, tool half, so this file and salarytohourly.css never
   style the same class. The widget half keeps its own inline link class
   for widgets 01, 04, 05, 06, 07 and 10.
   NOTE, 24 Aug 2026: the live donor salarybreakuptool.css carries the
   words "Named ptsc-style" at this point, a copy-paste artefact left by
   the post-tax session. Comment only, no render impact. Reported as a
   finding on the reference page rather than reproduced here. */
.sth-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;
}

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

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

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


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

   THE DIVISOR READOUT is the honesty control this page needed. The
   previous engine hid its hours assumption inside the code and got
   it wrong, so this rebuild puts the assumption on screen, in the
   form, before the reader clicks anything. It is a read only cell
   styled to sit in the same grid as the five inputs.
   ═══════════════════════════════════════════════════════════ */

.sth-divisor-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  background: rgba(16,185,129,0.06);
  border: 1px dashed rgba(16,185,129,0.3);
  border-radius: 10px;
  box-sizing: border-box;
}

.sth-divisor-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #5A7090;
  margin-bottom: 4px;
}

.sth-divisor-readout {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #10B981;
  line-height: 1.45;
}

/* The five inputs plus the readout make six cells, so the donor's
   three column grid fills exactly two rows with no ragged gap. */
.sth-grid-3 > .sth-divisor-cell { align-self: start; }

@media (max-width: 768px) {
  .sth-divisor-cell { min-height: 0; }
}

@media (max-width: 480px) {
  .sth-divisor-readout { font-size: 13px; }
  /* The divisor table's right column holds a text value, not only
     money, and the donor sets the amount column to nowrap. On a
     375px phone that squeezed the label column to two words a line.
     Text values wrap here; the money rows are short enough not to. */
  #sth-table-divisor td.sth-amount { white-space: normal; }
  /* The donor sets .sth-table min-width 340px, 1px wider than the
     content column on a 375px phone, so even the two column tables
     scrolled. Same fix the post-tax rebuild made. */
  .sth-table { min-width: 288px; }
}