/* ============================================================
   HRA Exemption Calculator — hero redesign + mobile polish
   (Figma: New-Timelabs-2026 / node 5113:62707)
   ============================================================ */

/* ---------- Hero ---------- */
.hra-hero{
  position:relative;
  padding:180px 0 72px;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(255,255,255,0) 42%,#fff 100%),
    url("../images/hra/hero-bg.png") center top / cover no-repeat;
}
.hra-hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  max-width:1000px;
  margin:0 auto;
}
.hra-hero-inner h1{margin-top:6px}
.hra-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  border:2px solid transparent;
  border-radius:100px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(90deg,#ff6bc9 0%,#7c58ff 100%) border-box;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1;
  color:#000;
}
.hra-badge img{width:15px;height:15px;display:block;flex:0 0 auto}
.hra-hero h1{
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;
  font-size:clamp(34px,5.2vw,62px);
  line-height:1.12;
  letter-spacing:-.02em;
  color:#343a40;
}
.hra-hero h1 span,
.hra-hero h1 em{color:#1e40af;font-style:normal}
.hra-hero-sub{
  margin:0;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(15px,1.6vw,20px);
  font-weight:500;
  line-height:1.7;
  color:#343a40;
}

/* ---------- Trust line above the client-logo strip ----------
   Logo styling itself is shared — see wwwroot/css/client-logo.css,
   loaded by the _ClientLogo partial. */
.hra-hero .client-logo-glossary{margin-top:40px}
.hra-hero .client-logo-text{
  margin:0 0 26px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;
  font-weight:500;
  color:#606367;
}
.hra-hero .client-logo-text strong{color:#0a2540;font-weight:600}

/* ---------- Responsive: hero ---------- */
@media (max-width:991px){
  .hra-hero{padding:140px 0 48px}
  .hra-hero-inner{gap:30px}
  .hra-hero .client-logo-glossary{margin-top:32px}
}
@media (max-width:575px){
  .hra-hero{padding:120px 0 36px}
  .hra-hero-inner{gap:24px}
  .hra-hero-sub{max-width:340px}
  .hra-hero .client-logo-text{font-size:13.5px;margin-bottom:18px}
}

/* ============================================================
   Calculator card redesign (Figma node 5113:62982)
   ============================================================ */
.hra-calc-wrap{max-width:1488px}
.hra-calc-card{
  border:0;
  background:#f8f7ff;
  border-radius:36px;
  box-shadow:none;
  padding:15px 14px;
}
.hra-calc-card > .card-body{padding:0}
.hra-calc-card > .card-body > .row.g-4{
  display:grid;
  grid-template-columns:450px minmax(0,952px);
  gap:10px;
  width:1412px;
  margin:0;
}
.hra-calc-card > .card-body > .row.g-4 > .col-lg-4,
.hra-calc-card > .card-body > .row.g-4 > .col-lg-8{
  width:auto;
  max-width:none;
  padding:0;
}

/* ---- panels ---- */
.hra-calc-wrap .input-panel,
.hra-calc-wrap .hra-results{
  background:#fff;
  border:1px solid rgba(255,255,255,.29);
  border-radius:24px;
  box-shadow:0 10px 30px rgba(20,25,60,.06);
  padding:25px;
}
.hra-calc-wrap .input-panel{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:1297px;
}
.hra-calc-wrap .input-panel > .sec-hdr:not(:first-child){margin-top:8px}
.hra-calc-wrap .hra-results{min-height:1297px;}
.hra-calc-wrap .input-panel.sticky-panel{position:static;top:auto}

/* ---- section header ---- */
.hra-calc-wrap .sec-hdr{
  all:unset;
  display:block;
  position:relative;
  margin:0;
  padding:0 0 12px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:26px;
  color:#090909;
  letter-spacing:0;
  text-transform:none;
}
.hra-calc-wrap .sec-hdr::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:50px;height:2px;
  background:#60a5fa;
  border-radius:2px;
}
/* section blocks: kill the old bootstrap mb-3/mt-3 rhythm, use flex gap */
.hra-calc-wrap .input-panel > .mb-3{margin-bottom:0 !important}

/* ---- inputs ---- */
.hra-calc-wrap .form-label{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  color:#344054;
  margin-bottom:6px;
}
.hra-calc-wrap .form-control,
.hra-calc-wrap .form-select{
  height:60px;
  border:1px solid rgba(14,18,1,.1);
  border-radius:15px;
  padding:16px;
  font-size:14px;
  color:#101201;
  background-color:#fff;
  box-shadow:none;
}
.hra-calc-wrap .form-control::placeholder{color:rgba(14,18,1,.55);font-size:13px}
.hra-calc-wrap .form-control:focus,
.hra-calc-wrap .form-select:focus{
  border-color:#1e40af;
  box-shadow:0 0 0 3px rgba(30,64,175,.12);
}
.hra-calc-wrap .form-text{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px;
  line-height:20px;
  color:#344054;
  margin-top:6px;
}
.hra-calc-wrap .input-group .form-control{border-radius:15px 0 0 15px}
.hra-calc-wrap .input-group-text{
  height:60px;
  border:1px solid rgba(14,18,1,.1);
  border-left:0;
  border-radius:0 15px 15px 0;
  background:#f8f7ff;
  color:#344054;
}

/* ---- buttons ---- */
.hra-btn-row{display:flex;gap:15px;margin-top:4px}
.hra-btn-row .hra-btn{
  flex:1 1 0;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:12px 24px;
  border:0;
  border-radius:52px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500;
  font-size:16px;
  letter-spacing:-.15px;
  cursor:pointer;
  transition:background .18s,transform .18s;
}
.hra-btn-row .hra-btn img{width:24px;height:24px;object-fit:contain}
.hra-btn-reset{background:rgba(232,83,71,.28);color:#e85347}
.hra-btn-reset:hover{background:rgba(232,83,71,.42);color:#e85347}
.hra-btn-primary{background:#1e40af;color:#fff}
.hra-btn-primary:hover{background:#17348c;color:#fff}

/* ---- rule box ---- */
.hra-calc-wrap .hra-rule-box{
  margin-top:4px;
  padding:15px;
  border:1px solid rgba(223,202,247,.55);
  border-radius:16px;
  background:rgba(223,202,247,.31);
  color:#343a40;
  font-family:'Inter',sans-serif;
  font-size:14px;
  line-height:24px;
}
.hra-calc-wrap .hra-rule-box strong{font-weight:600;color:#343a40}

/* ---- results panel head + empty state ---- */
.hra-results-head{display:flex;justify-content:flex-end;margin-bottom:10px}
.hra-btn-export{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:48px;
  padding:12px 28px;
  border:0;
  border-radius:52px;
  background:#030303;
  color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500;
  font-size:16px;
  cursor:pointer;
  transition:background .18s;
}
.hra-btn-export img{width:24px;height:24px;object-fit:contain}
.hra-btn-export:hover{background:#222;color:#fff}
.hra-calc-wrap #noDataMsg{color:#c5c5c5;font-size:16px;line-height:24px;padding:110px 20px}
.hra-calc-wrap .hra-empty-state-icon{width:57px;height:57px;display:block;margin:0 auto;opacity:.72}
.hra-calc-wrap #noDataMsg p{color:#c5c5c5}

/* ---- result tables: allow horizontal scroll on small screens ---- */
.hra-calc-wrap .rp{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Closing conversion CTA (Figma node 5113:63098) ---------- */
.hra-closing-cta{
  position:relative;
  display:grid;
  align-items:center;
  min-height:600px;
  overflow:hidden;
  box-sizing:border-box;
  padding:80px 20px;
  background:
    radial-gradient(780px 420px at 7% 105%,rgba(29,78,216,.8),transparent 66%),
    radial-gradient(740px 400px at 98% 0%,rgba(30,64,175,.8),transparent 70%),
    linear-gradient(119deg,#050724 0%,#090a2d 47%,#050515 100%);
  color:#fff;
  text-align:center;
}
.hra-closing-cta__fan{
  position:absolute;
  top:-4px;
  left:-56px;
  width:min(31vw,430px);
  opacity:.72;
  pointer-events:none;
}
.hra-closing-cta__content{position:relative;z-index:1;max-width:980px}
.hra-closing-cta h2{
  max-width:760px;
  margin:0 auto 22px;
  color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:42px;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.035em;
}
.hra-closing-cta p{
  max-width:850px;
  margin:0 auto 28px;
  color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;
  line-height:1.55;
}
.hra-closing-cta__actions{display:flex;justify-content:center;gap:16px}
.hra-closing-cta__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 24px;
  border:1px solid transparent;
  border-radius:999px;
  color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.hra-closing-cta__button:hover,
.hra-closing-cta__button:focus-visible{color:#fff;transform:translateY(-2px)}
.hra-closing-cta__button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hra-closing-cta__button--primary{background:#1e40af}
.hra-closing-cta__button--primary:hover,
.hra-closing-cta__button--primary:focus-visible{background:#3156cb}
.hra-closing-cta__button--secondary{background:#fff;color:#1e40af}
.hra-closing-cta__button--secondary:hover,
.hra-closing-cta__button--secondary:focus-visible{background:#eef3ff;color:#1e40af}

@media print{
  .hra-calc-card > .card-body > .row.g-4{display:block;width:auto;margin:0}
  .hra-closing-cta{display:none}
}

/* ---- responsive ---- */
@media (max-width:991px){
  .hra-calc-wrap{padding-left:12px;padding-right:12px}
  .hra-calc-card{border-radius:24px;padding:10px}
  .hra-calc-card > .card-body > .row.g-4{display:grid;grid-template-columns:minmax(0,1fr);width:auto;gap:10px}
  .hra-calc-wrap .input-panel,
  .hra-calc-wrap .hra-results{min-height:0;border-radius:18px;padding:18px}
  .hra-calc-wrap .input-panel.sticky-panel{position:static}
  .hra-calc-wrap .form-control,
  .hra-calc-wrap .form-select,
  .hra-calc-wrap .input-group-text{height:54px;border-radius:12px}
  .hra-calc-wrap .input-group .form-control{border-radius:12px 0 0 12px}
  .hra-calc-wrap .input-group-text{border-radius:0 12px 12px 0}
  .hra-calc-wrap #noDataMsg{padding:64px 16px}
}
@media (max-width:767px){
  .hra-closing-cta{min-height:0;padding:82px 20px}
  .hra-closing-cta__fan{top:0;left:-62px;width:225px}
  .hra-closing-cta h2{max-width:330px;font-size:30px}
  .hra-closing-cta p{font-size:14px}
  .hra-closing-cta__actions{flex-direction:column;align-items:stretch;max-width:300px;margin:0 auto}
  .hra-closing-cta__button{width:100%}
}
@media (max-width:575px){
  .hra-btn-row{flex-wrap:wrap}
  .hra-btn-row .hra-btn{flex:1 1 100%}
  .hra-results-head{margin-bottom:14px}
  .hra-btn-export{width:100%;justify-content:center}
  .hra-calc-wrap .sum-card{padding:12px 10px}
  .hra-calc-wrap .sum-card .val{font-size:1.05rem}
  .hra-calc-wrap .rt thead th{font-size:.68rem}
  .hra-calc-wrap .rt tbody td{font-size:.78rem;padding:6px 8px}
}