/* ===== Injection 013: earnings grade calculator ===== */

.page-earnings-comparison .earn-calculator{
  display:grid !important;
  grid-template-columns:minmax(260px,1.6fr) repeat(4,minmax(125px,1fr)) auto !important;
  gap:11px !important;
  align-items:stretch !important;
  margin:0 0 24px !important;
  padding:20px !important;
  border:1px solid #dce2e8 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 8px 25px rgba(26,38,53,.075) !important;
}

.page-earnings-comparison .earn-calculator-title{
  grid-column:1/-1 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:2px !important;
}

.page-earnings-comparison .earn-calculator-title h2{
  margin:0 !important;
  color:#172233 !important;
  -webkit-text-fill-color:#172233 !important;
  background:transparent !important;
  font-size:25px !important;
  font-weight:1000 !important;
  line-height:1.1 !important;
  letter-spacing:-.025em !important;
}

.page-earnings-comparison .earn-calculator-title p{
  max-width:620px !important;
  margin:5px 0 0 !important;
  color:#647080 !important;
  -webkit-text-fill-color:#647080 !important;
  background:transparent !important;
  font-size:12px !important;
  line-height:1.48 !important;
}

.page-earnings-comparison .earn-grade-field{
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  gap:7px !important;
  min-width:0 !important;
}

.page-earnings-comparison .earn-grade-field label{
  color:#536071 !important;
  -webkit-text-fill-color:#536071 !important;
  font-size:10px !important;
  font-weight:1000 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
}

.page-earnings-comparison .earn-grade-select{
  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;
  padding:10px 42px 10px 12px !important;
  border:1px solid #aeb8c4 !important;
  border-radius:11px !important;
  background:#fff !important;
  color:#172233 !important;
  -webkit-text-fill-color:#172233 !important;
  font-size:13px !important;
  font-weight:800 !important;
  outline:none !important;
}

.page-earnings-comparison .earn-grade-select:focus{
  border-color:#1450a3 !important;
  box-shadow:0 0 0 4px rgba(20,80,163,.12) !important;
}

.page-earnings-comparison .earn-rate-card{
  position:relative !important;
  overflow:hidden !important;
  min-height:74px !important;
  padding:13px !important;
  border:1px solid #e1e6eb !important;
  border-top:5px solid var(--rate-accent,#176832) !important;
  border-radius:12px !important;
  background:#f7f9fb !important;
}

.page-earnings-comparison .earn-rate-card span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#647080 !important;
  -webkit-text-fill-color:#647080 !important;
  font-size:10px !important;
  font-weight:1000 !important;
  line-height:1.2 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}

.page-earnings-comparison .earn-rate-card strong{
  display:block !important;
  margin:8px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  color:#172233 !important;
  -webkit-text-fill-color:#172233 !important;
  font-size:23px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  font-variant-numeric:tabular-nums !important;
}

.page-earnings-comparison .earn-rate-base{--rate-accent:#176832}
.page-earnings-comparison .earn-rate-ot1{--rate-accent:#946100}
.page-earnings-comparison .earn-rate-ot2{--rate-accent:#df151d}
.page-earnings-comparison .earn-rate-bonus{--rate-accent:#1450a3}

.page-earnings-comparison .earn-reset-button{
  align-self:end !important;
  min-height:48px !important;
  padding:10px 14px !important;
  border:1px solid #df151d !important;
  border-radius:11px !important;
  background:#fff0f1 !important;
  color:#a20a11 !important;
  -webkit-text-fill-color:#a20a11 !important;
  font-size:12px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
}

.page-earnings-comparison .earn-reset-button:hover{
  background:#df151d !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.page-earnings-comparison .earn-calculator-status{
  grid-column:1/-1 !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:8px !important;
  margin-top:1px !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  background:#eef5fd !important;
  color:#294866 !important;
  -webkit-text-fill-color:#294866 !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}

.page-earnings-comparison .earn-calculator-status::before{
  content:"✓";
  display:grid !important;
  place-items:center !important;
  flex:0 0 20px !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#1450a3 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:11px !important;
  font-weight:1000 !important;
}

.page-earnings-comparison .earn-calculated{
  animation:earn-value-flash .35s ease !important;
}

@keyframes earn-value-flash{
  0%{background:#fff2ba}
  100%{background:transparent}
}

@media(max-width:1050px){
  .page-earnings-comparison .earn-calculator{
    grid-template-columns:repeat(4,minmax(120px,1fr)) !important;
  }

  .page-earnings-comparison .earn-grade-field{
    grid-column:1/-1 !important;
  }

  .page-earnings-comparison .earn-reset-button{
    grid-column:1/-1 !important;
    width:max-content !important;
  }
}

@media(max-width:700px){
  .page-earnings-comparison .earn-calculator{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    padding:15px !important;
  }

  .page-earnings-comparison .earn-calculator-title{
    flex-direction:column !important;
  }

  .page-earnings-comparison .earn-grade-field,
  .page-earnings-comparison .earn-calculator-status{
    grid-column:1/-1 !important;
  }
}

@media(max-width:440px){
  .page-earnings-comparison .earn-calculator{
    grid-template-columns:1fr !important;
  }

  .page-earnings-comparison .earn-rate-card,
  .page-earnings-comparison .earn-grade-field,
  .page-earnings-comparison .earn-reset-button,
  .page-earnings-comparison .earn-calculator-status{
    grid-column:1 !important;
  }
}

@media print{
  .page-earnings-comparison .earn-reset-button{
    display:none !important;
  }

  .page-earnings-comparison .earn-calculator{
    box-shadow:none !important;
    break-inside:avoid !important;
  }
}