/*
  MoreRefundTax Paystub Tool UI (v26.5.8)
  Tool-first styling: clean, consistent, and predictable (no versioned override stacks).
*/

:root{
  --ps-bg: #f3f4f6;
  --ps-card: #ffffff;
  --ps-border: #e5e7eb;
  --ps-text: #0f172a;
  --ps-muted: #64748b;

  --ps-primary: #16a34a; /* green */
  --ps-primary-ink: #0b3a1a;

  --ps-blue: #1d4ed8;
  --ps-orange: #f97316;
  --ps-orange-dark: #ea580c;

  --ps-danger: #dc2626;
  --ps-warn: #92400e;
}

*, *::before, *::after{ box-sizing: border-box; }

.ps-page{
  background: var(--ps-bg);
  padding-bottom: 60px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ps-container{
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* ===== Hero / top area ===== */
.ps-hero{ padding: 26px 0 12px; }
.ps-hero--minimal{ padding: 18px 0 10px; }
.ps-hero--center{ text-align: center; }

.ps-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 900;
  color: var(--ps-text);
}

.ps-subtitle{
  margin: 6px 0 0;
  color: var(--ps-text);
  font-weight: 700;
}

.ps-subtitle--muted{ color: var(--ps-muted); font-weight: 700; }

.ps-field-hint{ color: var(--ps-muted); font-weight: 700; }
.ps-signedin{ margin: 0; }

/* ===== Cards ===== */
.ps-app{ padding-top: 8px; }

.ps-card{
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.ps-section-card{ margin-top: 16px; }
/* Earnings Statement section: slightly wider content area */
.ps-earnings-card{
  /* Give Earnings Statement more usable horizontal room */
  padding-left:8px;
  padding-right:8px;
}


.ps-section-head{ margin-bottom: 12px; }

.ps-section-head--row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ps-section-title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ps-text);
}

.ps-card-title{
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--ps-text);
  font-size: 1.25rem;
}

.ps-card-title--center{ text-align: center; }
.ps-card-title--muted{ color: var(--ps-muted); }

/* ===== Buttons ===== */
.ps-btn{
  border: 1px solid var(--ps-border);
  background: #fff;
  color: var(--ps-text);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.ps-btn:disabled{ opacity: 0.6; cursor: not-allowed; }

.ps-btn-primary{
  background: var(--ps-primary);
  border-color: var(--ps-primary);
  color: #fff;
}

.ps-btn-outline{
  border-color: rgba(22, 163, 74, 0.55);
  color: var(--ps-primary);
  background: #fff;
}

.ps-btn-blue{
  border-color: rgba(29, 78, 216, 0.5);
  color: var(--ps-blue);
  background: #fff;
}

.ps-btn-orange{
  background: var(--ps-orange);
  border-color: var(--ps-orange);
  color: #fff;
}

.ps-btn-orange:hover{
  background: var(--ps-orange-dark);
  border-color: var(--ps-orange-dark);
}

/* ===== Alerts ===== */
.ps-alert{
  border: 1px solid var(--ps-border);
  background: #f0fdf4;
  color: var(--ps-text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
}

.ps-alert-error,
.ps-alert--error{
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.ps-alert-warn{
  border-color: #fde68a;
  background: #fffbeb;
  color: var(--ps-warn);
}

.ps-alert[hidden]{ display:none; }
.ps-req{ color: var(--ps-danger); }

/* ===== Forms ===== */
.ps-form{ margin: 0; }

.ps-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.ps-field > span{
  font-size: 0.85rem;
  color: var(--ps-muted);
  font-weight: 800;
}

.ps-field input,
.ps-field select{
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
  background: #fff;
  color: var(--ps-text);
}

/* Compact inline field variant (used for Step 1 Orientation selector next to Preview button) */
.ps-field--inline{
  gap: 4px;
}
.ps-field--inline > span{
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.9;
}
.ps-orient{
  min-width: 180px;
}
.ps-orient select{
  min-width: 180px;
}

.ps-field input:focus,
.ps-field select:focus{
  border-color: rgba(22,163,74,0.6);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}

.ps-inline-row{ margin-top: 10px; }

/* Hide number spinners where they are distracting (wage + money inputs) */
#wageAmt::-webkit-outer-spin-button,
#wageAmt::-webkit-inner-spin-button,
.ps-money-input input::-webkit-outer-spin-button,
.ps-money-input input::-webkit-inner-spin-button,
.psg-table input[type=number]::-webkit-outer-spin-button,
.psg-table input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

#wageAmt,
.ps-money-input input,
.psg-table input[type=number]{ -moz-appearance: textfield; }

/* ===== Gate pages ===== */
.ps-gate{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.ps-grid{ display:grid; gap: 14px; }

/* Access gate: 3 fields across on desktop */
.ps-grid--gate3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px){
  .ps-grid--gate3{ grid-template-columns: 1fr; }
}

.ps-gate-bottom{
  margin-top: 14px;
  display:flex;
  justify-content:center;
}

/* Verify gate: center the code field and keep it compact */
.ps-grid--verify{ grid-template-columns: 1fr; justify-items: center; }

.ps-grid--verify .ps-field--code{ width: min(320px, 100%); }

.ps-field--code input{
  text-align:center;
  letter-spacing: 0.18em;
  font-weight: 900;
}

.ps-gate-actions{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
}

.ps-gate-actions form{ margin: 0; }
.ps-gate-actions a.ps-btn{ text-decoration: none; }

.ps-gate-actions--triple .ps-btn{
  min-width: 170px;
  text-align:center;
}

/* ===== Stepper ===== */
.ps-stepper{
  margin-top: 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 0;
  background: var(--ps-card);
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  padding: 14px 14px 10px;
  position: relative;
  overflow:hidden;
}

.ps-stepper::before{
  content:"";
  position:absolute;
  left: 28px;
  right: 28px;
  top: 26px;
  height: 3px;
  background: var(--ps-border);
  border-radius: 999px;
}

/* Progress line: green for completed segments, gray for future segments */
.ps-stepper[data-current="2"]::before{
  background: linear-gradient(to right, var(--ps-primary) 0%, var(--ps-primary) 50%, var(--ps-border) 50%, var(--ps-border) 100%);
}

.ps-stepper[data-current="3"]::before{
  background: linear-gradient(to right, var(--ps-primary) 0%, var(--ps-primary) 100%);
}

.ps-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  flex: 1;
  text-align:center;
}

.ps-step-dot{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 2px solid var(--ps-border);
  background: #fff;
  color: var(--ps-muted);
  font-weight: 900;
  z-index: 1;
}

.ps-step-label{
  font-size: 0.85rem;
  color: var(--ps-muted);
  font-weight: 700;
  max-width: 180px;
}

/* Active step: open green circle */
.ps-step--active .ps-step-dot{
  border-color: var(--ps-primary);
  color: var(--ps-primary);
  background: #fff;
}

/* Completed step: filled green */
.ps-step--done .ps-step-dot{
  border-color: var(--ps-primary);
  background: var(--ps-primary);
  color: #fff;
}

.ps-step--active .ps-step-label,
.ps-step--done .ps-step-label{
  color: var(--ps-text);
  font-weight: 900;
}

@media (max-width: 640px){
  .ps-stepper::before{ left: 18px; right: 18px; }
}

/* ===== Panels ===== */
.ps-panel{ display:none; }
.ps-panel--active{ display:block; }
.ps-panels{ margin-top: 14px; }

/* ===== Form grids (tool step 1) ===== */
.ps-form-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ps-field--span2{ grid-column: span 2; }
.ps-field--sm{ grid-column: span 1; }

/* Company one-row layout: name | EIN | address | logo */
.ps-form-grid--company-oneRow{
  grid-template-columns: 1.35fr 0.55fr 2.1fr 0.75fr;
  align-items: end;
}

.ps-form-grid--company-oneRow .ps-field--span2{ grid-column: auto; }

.ps-field--ein input{
  max-width: 140px;
}

.ps-logo-preview{
  margin-top: 8px;
  width: 100%;
  max-height: 60px;
  object-fit: contain;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  background: #fff;
}

.ps-form-grid--worker{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ps-form-grid--schedule{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 920px){
  .ps-form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-field--span2{ grid-column: span 2; }
  .ps-form-grid--company-oneRow{ grid-template-columns: 1fr; }
  .ps-form-grid--company-oneRow .ps-field--span2{ grid-column: auto; }
  .ps-form-grid--schedule{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .ps-form-grid{ grid-template-columns: 1fr; }
  .ps-field--span2{ grid-column: auto; }
  .ps-form-grid--schedule{ grid-template-columns: 1fr; }

  /* Mobile: avoid horizontal overflow in the Company Info row (logo/file + EIN). */
  .ps-field--ein input{ max-width: 100%; }
  input[type="file"]{ max-width: 100%; }
  #logoFile{ font-size: 0.95rem; }
}

/* ===== Worker type segmented control ===== */
.ps-seg{
  display:inline-flex;
  border: 1px solid var(--ps-border);
  border-radius: 999px;
  overflow:hidden;
  background: #fff;
}

.ps-seg-item{ position:relative; }

.ps-seg-item input{ position:absolute; opacity:0; pointer-events:none; }

.ps-seg-item span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  font-weight: 900;
  color: var(--ps-muted);
  cursor:pointer;
  min-width: 120px;
}

.ps-seg-item input:checked + span{
  background: #f0fdf4;
  color: var(--ps-primary);
}

/* ===== Salary/Hourly pill toggle ===== */
.ps-pill-toggle{
  display:inline-flex;
  border: 1px solid var(--ps-border);
  border-radius: 999px;
  padding: 3px;
  background: #f8fafc;
}

.ps-pill{ flex: 1; min-width: 120px; }

.ps-pill input{ position:absolute; opacity:0; pointer-events:none; }

.ps-pill span{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 900;
  color: var(--ps-muted);
  cursor:pointer;
}

/* Selected: full-height half-pill style highlight */
.ps-pill input:checked + span{
  background: var(--ps-primary);
  color: #fff;
}

/* ===== Step 1 controls ===== */
.ps-actions{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ps-actions--end{ justify-content:flex-end; }

/* ===== Stubs accordion ===== */
.ps-stubs{ margin-top: 16px; display:flex; flex-direction:column; gap: 14px; align-items: stretch; }

.ps-stub{
  /* Force full-width accordion cards (prevents shrink-to-fit when collapsed). */
  display:block;
  width:100%;
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  background: #fff;
  overflow:hidden;
}

.ps-stub summary{ list-style: none; }
.ps-stub summary::-webkit-details-marker{ display:none; }

/*
  Generator accordion toggle.
  IMPORTANT: This intentionally uses a UNIQUE class name (ps-stub-togglebar)
  so it does not collide with css/paystub-stub.css (.ps-stub-summary), which
  styles the *rendered paystub summary grid*.
*/
.ps-stub-togglebar{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:6px 8px;
  cursor:pointer;
  background:transparent;
  border:0;
}
.ps-stub-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  font-size:18px;
  line-height:1;
  color:#64748b;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#ffffff;
  transition:transform 160ms ease;
}
.ps-stub[open] .ps-stub-toggle{
  transform:rotate(180deg);
}


/* Reduce double side-padding inside the Earnings Statement (card + stub body). */
/* Give the Earnings Statement tables maximum horizontal room */
.ps-stub-body{ padding: 8px 0 10px; }

.ps-stub-body .ps-form-grid,
.ps-stub-body .ps-es-grid,
.ps-stub-body .ps-table-wrap{ padding-left: 8px; padding-right: 8px; }

.ps-subhead{
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--ps-text);
  width: 100%;
  box-sizing: border-box;
}

.ps-subhead-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}



/* Icon-only add buttons (Earnings/Deductions) */
.ps-add-link{
  border: 0;
  background: transparent;
  padding: 0;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

.ps-add-link:hover{ filter: brightness(0.98); }

.ps-add-link.ps-icon-add .ps-plus{ margin-right: 0; }

/* Remove the extra top margin on the first subhead row in each column
   (prevents misalignment between Earnings/Deductions and Taxes). */
.ps-es-left .ps-subhead-row:first-child,
.ps-es-right .ps-subhead-row:first-child{ margin-top: 0; }

/* Earnings/Deductions left + Taxes right */
.ps-es-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 18px;
  align-items: start;
}

.ps-es-grid > *{ min-width: 0; }
.ps-es-left{ min-width: 0; }

.ps-es-left,
.ps-es-right{
  min-width: 0;
}

@media (max-width: 980px){
  .ps-es-grid{ grid-template-columns: 1fr; }
}

/* ===== Money input wrapper ===== */
.ps-money-input{
  position:relative;
  display:flex;
  align-items:center;
  width: 100%;
}

.ps-money-prefix{
  border: 1px solid var(--ps-border);
  border-right: 0;
  padding: 10px 10px;
  border-radius: 12px 0 0 12px;
  background: #f8fafc;
  color: var(--ps-muted);
  font-weight: 900;
}

.ps-money-input input{
  border: 1px solid var(--ps-border);
  border-radius: 0 12px 12px 0;
  padding: 10px 12px;
  width: 100%;
  text-align: right;
}

.ps-money-input--table .ps-money-prefix{ padding: 6px 8px; }
.ps-money-input--table input{ padding: 6px 8px; }

/* ===== Tables ===== */
.ps-table-wrap{
  position: relative;
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

/*
  Mobile UX: iOS often hides native scrollbars until you scroll.

  Instead of overlaying "Swipe" hints (which can look like part of the table),
  we render an explicit horizontal slider under any horizontally-scrollable
  container. This is obvious, familiar, and doesn't smear/overlay the paystub.
*/
.ps-hscroll{ display: none; }

@media (max-width: 640px){
  .ps-hscroll{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 0 4px;
  }
  .ps-hscroll.is-hidden{ display: none; }
  .ps-hscroll input[type="range"]{
    width: 100%;
    max-width: 100%;
  }
}

.psg-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 0;
}

.psg-table thead th{
  background: #dbeafe;
  color: var(--ps-muted);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 8px 8px;
  border-bottom: 1px solid var(--ps-border);
  text-align:left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.psg-table tbody td{
  padding: 6px 8px;
  border-bottom: 1px solid var(--ps-border);
  vertical-align: middle;
}

.psg-table tbody tr:last-child td{ border-bottom: 0; }

.psg-table input,
.psg-table select{
  width: 100%;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ps-text);
}

.psg-table td:nth-child(2) input,
.psg-table td:nth-child(3) input,
.psg-table td:nth-child(4) input,
.psg-table td:nth-child(5) input,
.psg-table td:nth-child(2) select,
.psg-table td:nth-child(3) select,
.psg-table td:nth-child(4) select,
.psg-table td:nth-child(5) select{
  text-align: right;
}

.psg-table--deductions td:nth-child(2) select{ text-align: left; }

.ps-col-actions{ width: 44px; }

.ps-row-remove{
  border: 0;
  background: transparent;
  color: var(--ps-muted);
  cursor:pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.ps-row-remove:hover{ color: var(--ps-danger); }

.ps-row-remove--disabled{ opacity: 0.25; }

/* Column sizing (Generator tables)
   - Keep the first "name" column compact so it doesn't steal all the extra width.
   - Ensure numeric fields have enough room for expected values.
   Targets (per feedback):
     Rate/Unit: 4 digits (1234)
     Units:     4 digits (1234)
     Total:     8 digits (12345678)
     Last YTD:  8 digits (12345678)
     Tax Type:  5 letters (XXXXX)
*/
.psg-table--earnings th:nth-child(1),
.psg-table--earnings td:nth-child(1){ width: 18%; }

.psg-table--earnings th:nth-child(2),
.psg-table--earnings td:nth-child(2){ width: 10%; min-width: 6ch; }

.psg-table--earnings th:nth-child(3),
.psg-table--earnings td:nth-child(3){ width: 10%; min-width: 6ch; }

.psg-table--earnings th:nth-child(4),
.psg-table--earnings td:nth-child(4){ width: 28%; min-width: 12ch; }

.psg-table--earnings th:nth-child(5),
.psg-table--earnings td:nth-child(5){ width: 28%; min-width: 12ch; }

.psg-table--earnings th:nth-child(6),
.psg-table--earnings td:nth-child(6){ width: 6%; }

.psg-table--deductions th:nth-child(1),
.psg-table--deductions td:nth-child(1){ width: 16%; }

.psg-table--deductions th:nth-child(2),
.psg-table--deductions td:nth-child(2){ width: 22%; min-width: 6ch; }

.psg-table--deductions th:nth-child(3),
.psg-table--deductions td:nth-child(3){ width: 28%; min-width: 12ch; }

.psg-table--deductions th:nth-child(4),
.psg-table--deductions td:nth-child(4){ width: 28%; min-width: 12ch; }

.psg-table--deductions th:nth-child(5),
.psg-table--deductions td:nth-child(5){ width: 6%; }

/* Taxes: keep Current/YTD widths stable; any remaining space goes to Tax name column. */
.psg-table--taxes th:nth-child(2),
.psg-table--taxes td:nth-child(2){ width: 14ch; }
.psg-table--taxes th:nth-child(3),
.psg-table--taxes td:nth-child(3){ width: 14ch; }

/* ===== Mobile usability (generator tables) =====
   On small screens, fixed table layout can crush numeric inputs.
   Prefer horizontal scrolling with stable column widths.
   Priority columns: Total + Last YTD.
*/
@media (max-width: 640px){
  .psg-table{ table-layout: auto; }

  /* Ensure enough room for the key money fields without turning inputs into tiny boxes */
  .psg-table--earnings{ min-width: 860px; }
  .psg-table--deductions{ min-width: 640px; }
  .psg-table--taxes{ min-width: 520px; }

  /* Prioritize Total + Last YTD readability */
  .psg-table--earnings th:nth-child(4),
  .psg-table--earnings td:nth-child(4),
  .psg-table--earnings th:nth-child(5),
  .psg-table--earnings td:nth-child(5),
  .psg-table--deductions th:nth-child(3),
  .psg-table--deductions td:nth-child(3),
  .psg-table--deductions th:nth-child(4),
  .psg-table--deductions td:nth-child(4){
    min-width: 14ch;
  }
}


/* ===== Taxes block ===== */
.ps-tax-block{position: relative;
  width: 100%;}

.ps-tax-actions{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Calculate taxes button: 2x larger, blue filled, pill-shaped (matches Preview button style) */
.ps-calc-taxes-btn{
  padding: 20px 28px;
  font-size: 1.1rem;
  min-width: 140px;
}

.ps-check{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--ps-muted);
  user-select:none;
}

.ps-tax-current{ text-align: right; }

.ps-tax-block:not(.is-manual) .ps-tax-current{
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.ps-tax-block:not(.is-manual) .ps-tax-current:disabled{
  opacity: 1;
  color: var(--ps-text);
  -webkit-text-fill-color: var(--ps-text);
}

.ps-tax-stack{
  position:relative;
}

/* Locked tax blocks should be unreadable, with the helper text floating on top */
.ps-tax-block.is-locked .ps-table-wrap{
  filter: blur(10px) grayscale(0.20) opacity(0.18);
}
.ps-tax-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(248,250,252,0.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  color:#0f172a;
  font-size:.92rem;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}
.ps-tax-overlay[hidden]{
  display:none;
}


/* ===== Per-stub summary bar ===== */
.ps-stub-summary-bar{
  margin-top: 14px;
  border: 1px solid #86efac;
  background: #f0fdf4;
  border-radius: 14px;
  padding: 12px;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ps-stub-sum-item{ display:flex; flex-direction:column; gap: 4px; }

.ps-stub-sum-item span{
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ps-muted);
}

.ps-stub-sum-item strong{
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ps-text);
}

.ps-stub-sum-item--net strong{ font-size: 1.15rem; }

@media (max-width: 900px){
  .ps-stub-summary-bar{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Step 2 (review) ===== */
.ps-review-page{ margin-top: 10px; }

.ps-review-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ps-select-all{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  color: var(--ps-text);
}

.ps-select-all input{ width: 18px; height: 18px; accent-color: var(--ps-primary); }

.ps-add-paystub{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid rgba(29,78,216,0.35);
  color: var(--ps-blue);
  background:#fff;
  border-radius: 999px;
  padding: 8px 12px 8px 14px;
  font-weight: 900;
}

.ps-plus{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
}

.ps-selected-count{ color: var(--ps-muted); font-style: italic; margin: 2px 0 10px; }

.ps-review-list{ display:flex; flex-direction:column; gap: 14px; }

.ps-review-item{
  background:#fff;
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 14px;
}

.ps-ri-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }

.ps-ri-check{ display:flex; align-items:center; gap: 10px; font-weight: 900; flex-wrap: wrap; }

.ps-ri-company{ color: var(--ps-text); font-weight: 900; }
.ps-ri-ein{ color: var(--ps-muted); font-weight: 800; }

.ps-ri-mid{ display:flex; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.ps-ri-worker{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; font-weight: 800; color: var(--ps-text); }
.ps-ri-worker-meta{ color: var(--ps-muted); font-weight: 700; }

.ps-ri-template{ margin-left:auto; min-width: 320px; }
@media (max-width: 760px){ .ps-ri-template{ min-width: 0; width: 100%; } }

.ps-ri-template-label{ font-size: 13px; font-weight: 900; color: var(--ps-muted); margin-bottom: 6px; }

.ps-ri-template-row{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }

.ps-ri-tpl-thumb{ width: 46px; height: 30px; border: 1px solid var(--ps-border); border-radius: 6px; background: linear-gradient(#ffffff, #f3f4f6); }

.ps-ri-template-select{ height: 34px; border: 1px solid var(--ps-border); border-radius: 10px; padding: 0 10px; font-weight: 800; background:#fff; }

.ps-ri-preview-btn{ height: 34px; padding: 0 14px; background: var(--ps-blue); border: 1px solid var(--ps-blue); color:#fff; border-radius: 999px; font-weight: 900; cursor:pointer; }

.ps-ri-meta{ margin-top: 12px; border-top: 1px solid var(--ps-border); padding-top: 12px; }

.ps-ri-meta-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  overflow:hidden;
}

@media (max-width: 760px){
  .ps-ri-meta-grid{ grid-template-columns: 1fr; }
}

.ps-ri-meta-col{ padding: 10px 10px 8px; border-right: 1px solid var(--ps-border); }
.ps-ri-meta-col:last-child{ border-right: 0; }

.ps-ri-meta-val{ font-weight: 900; color: var(--ps-text); }
.ps-ri-meta-lab{ margin-top: 2px; font-size: 12px; color: var(--ps-muted); font-weight: 800; }

.ps-ri-meta-col.ps-ri-net .ps-ri-meta-val{ color: var(--ps-blue); font-size: 16px; }

.ps-ri-actions{ display:flex; align-items:center; justify-content:space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ps-border); color: var(--ps-muted); }

.ps-ri-copy{ border: 0; background: transparent; color: var(--ps-danger); font-weight: 900; cursor:pointer; padding: 0; }

.ps-ri-icons{ display:flex; align-items:center; gap: 10px; }

.ps-ri-iconbtn{ width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--ps-border); background:#fff; cursor:pointer; color: var(--ps-text); font-weight: 900; }

/* Order details area */
.ps-order-section{
  margin-top:18px;
}

/* When the checkout box is placed at the top of Step 2, remove the top margin and
   give it breathing room below so the rest of the preview list starts beneath it. */
.ps-order-section--top{
  margin-top:0;
  margin-bottom:18px;
}
.ps-order-title{
  font-size:1.15rem;
  font-weight:800;
  margin:0 0 10px;
  text-align:center;
}

/* Keep the checkout elements a neat, centered column */
.ps-order-wrap{
  max-width:520px;
  margin:0 auto;
}

.ps-order-box{
  background:transparent;
  border:0;
  padding:0;
}

.ps-order-box-inner{
  border:2px solid #2563eb;
  border-radius:12px;
  background:#fff;
  padding:14px 14px 10px;
}

/* Order details grid (Description / Qty / Amount) */
.ps-order-grid{
  display:block;
}
.ps-order-row{
  display:grid;
  grid-template-columns: 1fr 64px 110px;
  gap:10px;
  align-items:center;
  padding:6px 0;
  font-size:.95rem;
}
.ps-order-head{
  font-weight:800;
  color:#0f172a;
  border-bottom:1px solid #e2e8f0;
  padding-bottom:8px;
  margin-bottom:6px;
}
.ps-order-item{
  font-weight:700;
  color:#0f172a;
}
.ps-order-desc{
  font-weight:800;
}
.ps-order-unit{
  font-size:.85rem;
  color:#64748b;
  margin-top:2px;
}
.ps-order-qty, .ps-order-amt{
  text-align:right;
  white-space:nowrap;
}

/* Summary rows under the grid */
.ps-order-divider{
  height:1px;
  background:#e2e8f0;
  margin:10px 0;
}
.ps-order-summary{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font-weight:800;
  color:#0f172a;
}
.ps-order-discount{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font-weight:800;
  color:#1d4ed8;
  margin-top:8px;
}

/* Meta rows (eg. Orientation) */
.ps-order-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-top:8px;
  font-weight:700;
  color:#0f172a;
}
.ps-order-meta-right{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.ps-order-orient-change{
  display:inline;
  margin:0;
  padding:0;
}
.ps-order-link,
.ps-order-apply{
  appearance:none;
  border:0;
  background:transparent;
  color:#2563eb;
  text-decoration:underline;
  font-weight:700;
  cursor:pointer;
  padding:0;
  margin:6px auto 0;
  display:block;
}

/* Orientation "change" link should be inline (not centered block like the discount apply link) */
.ps-order-link.ps-order-orient-change{
  display:inline;
  margin:0;
  padding:0;
}
.ps-order-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e2e8f0;
  font-weight:900;
  font-size:1.03rem;
  color:#0f172a;
}
.ps-order-total .ps-order-total-amt{
  color:#dc2626;
}

/* Selected count + button */
.ps-order-selected{
  margin:10px 0 0;
  color:#64748b;
  font-size:.92rem;
  text-align:center;
}
.ps-complete-order{
  width:100%;
  margin-top:12px;
  background:#f97316;
  color:#fff;
  border:0;
  border-radius:10px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
}
.ps-complete-order:hover{
  background:#ea580c;
}


/* ===== Step 3 downloads ===== */
.ps-download-list{ display:flex; flex-direction:column; gap: 12px; margin-top: 14px; }

.ps-download-item{ border: 1px solid var(--ps-border); border-radius: 14px; padding: 12px; background: #fff; }



.ps-download-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.ps-download-title{
  font-weight: 800;
  color: #111827;
}

.ps-download-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.ps-download-item a{ color: var(--ps-primary); font-weight: 900; text-decoration: underline; }

/* ===== Modals ===== */
.ps-modal[hidden]{ display:none; }

.ps-modal{
  position: fixed;
  inset: 0;
  /*
    Must sit above the site's global nav/header (mobile Safari) so dialogs don't get
    visually tucked underneath it.
    Keep below pac-container (100000) so Google Places suggestions still appear.
  */
  z-index: 99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.ps-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, 0.55);
}

.ps-modal-dialog{
  position:relative;
  z-index: 1;
  width: min(560px, 100%);
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.25);
  display:flex;
  flex-direction: column;
  max-height: 100%;
}

.ps-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f0fdf4;
  border-bottom: 1px solid var(--ps-border);
}

.ps-modal-title{ font-weight: 900; color: var(--ps-text); }

.ps-icon-btn{ border: 0; background: transparent; color: var(--ps-muted); cursor:pointer; font-size: 1.1rem; }
.ps-icon-btn:hover{ color: var(--ps-text); }

.ps-modal-body{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  /* If a dialog gets tall (mobile keyboard, long preview), scroll the body not the page. */
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.ps-modal-hint{ margin: 0; color: var(--ps-muted); font-weight: 700; font-size: 0.92rem; }

.ps-modal-actions{ display:flex; justify-content:flex-end; gap: 10px; flex-wrap: wrap; }

/* Confirmation modal specifics */
.ps-confirm-text{ margin: 0; color: var(--ps-text); font-weight: 800; }

.ps-confirm-check{ display:flex; align-items:flex-start; gap: 10px; font-weight: 700; color: var(--ps-text); }

.ps-confirm-check input{ margin-top: 3px; }

/* Google Places dropdown above modal */
.pac-container{ z-index: 100000 !important; }


/* Multiple Pay Stubs: keep the quantity selector compact */
#payStubQty{
  width: 6ch;
  max-width: 100%;
}



/* Stub count select sizing */
#stubCount {
  width: 11ch;
  min-width: 11ch;
  max-width: 14ch;
  align-self: flex-start;
  text-align: center;
}



/* ===== Preview + gate modals ===== */
.ps-gate-dialog{ max-width: 980px; }

.ps-preview-dialog{
  width: min(1100px, 96vw);
  max-width: 1100px;
}

.ps-preview-body{ padding-top: 10px; }

.ps-preview-framewrap{
  position: relative;
  width: 100%;
  height: min(78vh, 860px);
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
}

#psPreviewHost{
  width: 100%;
  height: 100%;
  display: block;
}

/* Step 3 generating state */
.ps-generating{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: var(--ps-muted);
}


.ps-step-nav{ margin-bottom: 10px; }

body.ps-modal-open{ overflow: hidden; }

/* Mobile: preview modal should always be closable without fighting overflow.
   Keep buttons visible and give the preview a scrollable viewport.
*/
@media (max-width: 640px){
  .ps-modal{
    /* Respect iOS safe areas so dialogs/buttons don't tuck under the browser UI. */
    padding:
      calc(10px + env(safe-area-inset-top))
      10px
      calc(10px + env(safe-area-inset-bottom))
      10px;
    align-items: flex-start;
    overflow: hidden;
  }

  .ps-modal-dialog{
    width: 100%;
    border-radius: 16px;
  }

  .ps-modal-actions{
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  .ps-preview-dialog{
    width: 100%;
    max-width: 100%;
    /* iOS Safari: prefer dynamic viewport units when supported. */
    height: 92vh;
    height: 92dvh;
  }
  .ps-preview-body{ flex: 1; min-height: 0; }
  .ps-preview-framewrap{ flex: 1; min-height: 0; height: auto; border-radius: 12px; }
}

.ps-review-nav{ margin-bottom: 10px; }

/*
  iOS Safari stability
  -------------------
  The global header uses backdrop-filter for a "frosted" look. On some iOS
  Safari builds this can intermittently blur/flicker while editing long forms
  and may even interfere with tap targets. For the paystub tool we prioritize
  stability: disable backdrop-filter on iOS while keeping the same dark tone.
*/
@supports (-webkit-touch-callout: none) {
  .mr-header-inner{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.95) !important;
  }
}