/* ═══════════════════════════════════════════════════════════
   OLD VS NEW TAX REGIME CALCULATOR - TOOL APP CSS (TOOL HALF)
   Upload to: /wp-content/uploads/2024/02/salarycalculator/oldvsnew/oldvsnewtool.css
   Prefix: ovn- (registered in SALARY-CALCULATORS-SILO.txt s.9d)
   Site Design System: Dark #0A0F1C | Green Silo #10B981
   Font: DM Sans (matches site)
   Loads BEFORE oldvsnew.css. Never merge the two.
   Design tokens copied from salarybreakuptool.css, the silo
   reference implementation, fetched live 22 Aug 2026.
   Input rules from SALARY-CALCULATORS-SILO.txt s.9a: 44px left
   padding for the prefix icon, native number spinners hidden.
   Zero class overlap with oldvsnew.css by design.
   ═══════════════════════════════════════════════════════════ */

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

.ovn-tool-hero {
  text-align: center;
  padding: 28px 0 30px;
}

/* The silo badge and the trust tags live HERE, in container 1, with the
   H1, because PAGE ASSEMBLY ORDER makes the tool app the first container
   on the page. They were previously in widget 01, which sits BELOW the
   calculator, so the page header furniture rendered under the tool.
   Tool-half names (ovn-tool-*) keep zero class overlap with oldvsnew.css. */

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

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

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

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

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

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

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

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

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

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

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

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

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

.ovn-field-wide { margin-top: 20px; }

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

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

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

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

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

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

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

/* Native number spinners clash with the dark theme and stepping a
   salary figure by 1 is useless. Arrow keys still step the value. */
.ovn-input::-webkit-outer-spin-button,
.ovn-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ovn-input[type="number"] { -moz-appearance: textfield; }

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

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

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

/* ── OLD REGIME DEDUCTIONS PANEL ── */
.ovn-ded-toggle {
  width: 100%;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 12px;
  padding: 12px 44px 12px 18px;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color 0.25s, background 0.25s;
}

.ovn-ded-toggle:hover { border-color: rgba(59,130,246,0.45); }

.ovn-ded-toggle::after {
  content: '+';
  position: absolute;
  right: 18px;
  top: 50%;
  margin-top: -11px;
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  color: #93C5FD;
  transition: transform 0.3s;
}

.ovn-ded-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }

.ovn-ded-toggle-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.ovn-ded-toggle-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #5A7090;
}

.ovn-ded-panel {
  margin-top: 18px;
  padding: 20px;
  background: rgba(10,15,28,0.45);
  border: 1px solid rgba(55,75,100,0.25);
  border-radius: 12px;
}

.ovn-ded-panel[hidden] { display: none; }

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

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

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

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

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

.ovn-btn-clear:hover {
  border-color: rgba(16,185,129,0.4);
  color: #C8D8E8;
}

.ovn-btn-calc:focus-visible,
.ovn-btn-clear:focus-visible,
.ovn-ded-toggle:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: 2px;
}

/* ── ERROR ── */
.ovn-error {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(248,113,113,0.3);
  border-left: 4px solid #F87171;
  background: rgba(248,113,113,0.07);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #F87171;
  line-height: 1.6;
}

.ovn-error[hidden] { display: none; }

/* ── RESULTS ── */
.ovn-results {
  padding: 0 32px 32px;
  animation: ovn-fade-up 0.35s ease-out;
}

.ovn-results[hidden] { display: none; }

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

.ovn-verdict {
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
  border: 1px solid rgba(16,185,129,0.25);
  border-left: 4px solid #10B981;
  background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.04) 100%);
}

.ovn-verdict-old {
  border-color: rgba(59,130,246,0.3);
  border-left-color: #3B82F6;
  background: linear-gradient(135deg, rgba(59,130,246,0.10) 0%, rgba(59,130,246,0.04) 100%);
}

.ovn-verdict-tie {
  border-color: rgba(136,153,170,0.3);
  border-left-color: #8899AA;
  background: linear-gradient(135deg, rgba(136,153,170,0.08) 0%, rgba(136,153,170,0.03) 100%);
}

.ovn-verdict-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 6px;
  line-height: 1.35;
}

.ovn-verdict-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #8899AA;
  line-height: 1.65;
}

.ovn-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ovn-col {
  background: rgba(10,15,28,0.5);
  border: 1px solid rgba(55,75,100,0.25);
  border-radius: 14px;
  overflow: hidden;
  /* The two regimes do not always print the same number of rows: rebate,
     marginal relief and surcharge lines appear only when they apply. Column
     is a flex stack so the totals sit flush at the bottom of both columns
     and the shorter one does not trail off into empty space. */
  display: flex;
  flex-direction: column;
}

.ovn-col-old  { border-color: rgba(59,130,246,0.25); }
.ovn-col-new  { border-color: rgba(16,185,129,0.25); }

.ovn-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(55,75,100,0.25);
}

.ovn-col-old .ovn-col-head { background: rgba(59,130,246,0.12); }
.ovn-col-new .ovn-col-head { background: rgba(16,185,129,0.12); }

.ovn-col-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #10B981;
  background: rgba(16,185,129,0.18);
  border-radius: 6px;
  padding: 3px 8px;
}

.ovn-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(55,75,100,0.12);
}

.ovn-row:last-child { border-bottom: none; }
.ovn-row[hidden] { display: none; }

.ovn-lab {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #8899AA;
  line-height: 1.45;
}

.ovn-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #C8D8E8;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ovn-row-key { background: rgba(55,75,100,0.10); }
.ovn-row-key .ovn-lab { color: #C8D8E8; font-weight: 600; }
.ovn-row-key .ovn-val { color: #FFFFFF; }

.ovn-row-total {
  background: rgba(55,75,100,0.16);
  margin-top: auto;
}
.ovn-row-total .ovn-lab {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 15px;
}
.ovn-row-total .ovn-val {
  font-size: 17px;
  font-weight: 800;
}
.ovn-col-old .ovn-row-total .ovn-val { color: #93C5FD; }
.ovn-col-new .ovn-row-total .ovn-val { color: #10B981; }

.ovn-breakeven {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.22);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #C8D8E8;
  line-height: 1.65;
}

.ovn-breakeven-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #F59E0B;
  background: rgba(245,158,11,0.15);
  border-radius: 6px;
  padding: 3px 8px;
  margin-right: 6px;
}

.ovn-disclaimer {
  margin: 16px 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: #5A7090;
  line-height: 1.7;
  font-style: italic;
}

/* The verdict banner's default styling IS the New Regime case, but the
   modifier is stated explicitly so all three states are visible in the
   file and none of them depends on a default. */
.ovn-verdict-new {
  border-color: rgba(16,185,129,0.25);
  border-left-color: #10B981;
  background: linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0.04) 100%);
}

.ovn-breakeven-text {
  font-family: 'DM Sans', sans-serif;
  color: #C8D8E8;
}

/* ── RESPONSIVE 768 ── */
@media (max-width: 768px) {
  .ovn-calc-section { padding: 16px 18px 40px; }
  .ovn-tool-hero { padding: 20px 0 24px; }
  .ovn-calc-header { padding: 22px 20px 16px; }
  .ovn-form { padding: 22px 20px; }
  .ovn-results { padding: 0 20px 24px; }
  .ovn-grid-2 { grid-template-columns: 1fr; }
  .ovn-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ovn-cols { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE 480 ── */
@media (max-width: 480px) {
  .ovn-calc-section { padding: 12px 14px 32px; }
  .ovn-calc-header { padding: 18px 16px 14px; gap: 12px; }
  .ovn-calc-icon { width: 44px; height: 44px; font-size: 22px !important; }
  .ovn-calc-title { font-size: 18px; }
  .ovn-form { padding: 18px 16px; }
  .ovn-results { padding: 0 16px 20px; }
  .ovn-grid-3 { grid-template-columns: 1fr; }
  .ovn-ded-panel { padding: 16px 14px; }
  .ovn-btn-calc { flex: 1 1 100%; }
  .ovn-btn-clear { flex: 1 1 100%; justify-content: center; }
  .ovn-row { padding: 10px 14px; }
  .ovn-verdict { padding: 16px; }
  .ovn-verdict-title { font-size: 17px; }
}

/* ── PRINT ── */
@media print {
  .ovn-actions, .ovn-ded-toggle { display: none !important; }
  .ovn-results[hidden] { display: block !important; }
}


/* ═══════════════════════════════════════════════════════════
   ADDITIONS - hero furniture moved up from widget 01, 22 Aug 2026
   Values copied verbatim from the .ovn-hero-badge, .ovn-hero-tags and
   .ovn-htag rules that used to live in oldvsnew.css, so the rendered
   result is identical. Those rules are deleted from that file.
   ═══════════════════════════════════════════════════════════ */

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

.ovn-tool-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

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

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