/* wage-tool.css
   Tool-only styling. Keep everything scoped under #wageTool.
*/

/* =========================
   Card + layering
   ========================= */

#wageTool .card{
  position: relative;
}

/* Keep watermark behind everything inside the card */
#wageTool .wt-watermark{
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  opacity: .12;
  filter: grayscale(100%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Ensure all interactive content sits above watermark */
#wageTool .topbar,
#wageTool .panel,
#wageTool .actions{
  position: relative;
  z-index: 1;
}

@media (max-width: 420px){
  #wageTool .wt-watermark{ display:none; }
}

/* =========================
   Topbar (progress + pill)
   ========================= */

#wageTool .topbar{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid #e0e0e5;
  background: #fff;
}

#wageTool .stepmeta{
  font-weight: 700;
  color: rgba(37, 43, 77, .8);
}

/* Progress bar */
#wageTool .progress{
  flex: 1;
  min-width: 180px;
  height: 10px;
  background: #e9eef7;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #dbe2ee;
}

#wageTool .progress > div{
  height: 100%;
  width: 0%;
  background: #005cb3;
  border-radius: 999px;
  transition: width 160ms ease-in-out;
}

/* Step pill */
#wageTool .pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #dbe2ee;
  background: #fff;
  color: #252B4D;
  font-weight: 700;
  font-size: 0.95rem;
}

/* =========================
   Panels + spacing
   ========================= */

#wageTool .panel{ display:none; }
#wageTool .panel.active{ display:block; }

/* Give the panel content room so it does not feel cramped */
#wageTool .panel{
  padding: 18px 18px 22px 18px;
}

/* Make the “sub” explanatory line readable */
#wageTool .sub{
  margin: 0 0 14px 0;
}

/* Each question block gets breathing room */
#wageTool .field{
  margin: 0 0 18px 0;
}

#wageTool label{
  display: block;
  margin: 0 0 6px 0;
  font-weight: 700;
  color: #252B4D;
}

/* Layout helpers */
#wageTool .grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px){
  #wageTool .grid{ grid-template-columns: 1fr 1fr; }
}

#wageTool .inline{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* =========================
   Inputs
   ========================= */

/* Extend your site’s “text input” feel to all common tool inputs.
   IMPORTANT: spacing should come from .field, not from input margins.
*/
#wageTool input[type="text"],
#wageTool input[type="email"],
#wageTool input[type="tel"],
#wageTool input[type="month"],
#wageTool input[type="number"],
#wageTool select{
  font-family: inherit;
  width: 100%;
  padding: 12px 20px;
  margin: 0;              /* keep stacking clean */
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;

  /* Prevent browser-specific styling differences (notably email on Safari/Chrome) */
  appearance: none;
  -webkit-appearance: none;
}

/* Consistent focus style */
#wageTool input[type="text"]:focus,
#wageTool input[type="email"]:focus,
#wageTool input[type="tel"]:focus,
#wageTool input[type="month"]:focus,
#wageTool input[type="number"]:focus,
#wageTool select:focus{
  outline: none;
  border-color: #005cb3;
  box-shadow: 0 0 0 3px rgba(0, 92, 179, 0.18);
}

/* Disabled fields should look intentionally disabled */
#wageTool input:disabled,
#wageTool select:disabled{
  background: #f3f4f6;
  color: #666;
  cursor: not-allowed;
}

/* Helpful text */
#wageTool .hint{
  font-size: .95rem;
  color: #444;
  margin-top: 6px;
}

/* Errors: add space above so they do not collide with the actions divider */
#wageTool .error{
  color: #b42318;
  margin: 12px 0 0 0;
  display: none;
}

/* Checkbox rows: box and label side-by-side */
#wageTool .checkrow{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#wageTool .checkrow input[type="checkbox"]{
  width: auto;
  margin: 3px 0 0 0;
  flex: 0 0 auto;
  appearance: auto;
  -webkit-appearance: auto;
}

#wageTool .checkrow label{
  margin: 0;
  font-weight: 650;
}

/* =========================
   Actions row
   ========================= */

#wageTool .actions{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 18px;     /* slightly more vertical padding */
  border-top: 1px solid #e0e0e5;
  background: #fff;
}

/* Give the actions row extra bottom breathing room so the watermark
   never feels like it is “sitting on” buttons on short screens. */
#wageTool .actions{
  padding-bottom: 22px;
}