/* ===========================================
   BANGLADESH INCOME TAX CALCULATOR (v2 UI)
   EVERYTHING SCOPED UNDER .bdtax
   =========================================== */

.bdtax {
  --pr:#1075E9;
  --muted:#64748b;
  --ink:#1f2937;
  --line:#e5e7eb;
  --bg:#f8fafc;
  --warn:#ef4444;

  font-family:"Noto Sans Bengali",ui-sans-serif,system-ui,"Segoe UI",Roboto,Arial;
  color:var(--ink);
  max-width:1200px;
  margin:24px auto;
  padding:0 12px;
}
.bdtax *{box-sizing:border-box}

/* -------------------------------------------
   Header & Toolbar
------------------------------------------- */
.bdtax__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.bdtax__brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.bdtax__logo{
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--pr);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:22px;
}
.bdtax__brand h1{
  font-size:20px;
  margin:0;
}
.bdtax__brand p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:14px;
}
.bdtax__kpis{
  display:flex;
  gap:12px;
}
.bdtax__kpi{
  background:#fff;
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:12px;
  min-width:160px;
}
.bdtax__kpi small{
  color:var(--muted);
  display:block;
  margin-bottom:2px;
}
.bdtax__kpi strong{
  font-size:18px;
  font-variant-numeric:tabular-nums;
}

.bdtax__toolbar{
  background:#eef5ff;
  border:1px solid #d7e6ff;
  padding:12px;
  border-radius:12px;
  margin-bottom:20px;
}

/* -------------------------------------------
   Taxpayer Category – card radios
------------------------------------------- */
.bdtax .tp-label{
  display:block;
  font-weight:700;
  margin-bottom:10px;
  color:#0f172a;
}
.bdtax .tp-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
@media (max-width:1100px){
  .bdtax .tp-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .bdtax .tp-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .bdtax .tp-grid{grid-template-columns:1fr}
}
.bdtax .tp-option{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 12px 12px 42px;
  border:1px solid #dbe3ff;
  background:#fff;
  border-radius:12px;
  cursor:pointer;
  min-height:56px;
  transition:box-shadow .2s,border-color .2s,background .2s;
  user-select:none;
}
.bdtax .tp-option:hover{
  border-color:#b8c7ff;
  box-shadow:0 2px 10px rgba(49,46,129,.06);
}
.bdtax .tp-title{
  font-weight:700;
  color:#111827;
  line-height:1.2;
}
.bdtax .tp-note{
  font-size:12px;
  color:#6b7280;
}

/* native radio hidden but accessible */
.bdtax .tp-option > input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  margin:0;
  cursor:pointer;
}

/* custom bullet */
.bdtax .tp-option::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid #a5b4fc;
  background:#fff;
  box-shadow:inset 0 0 0 2px #fff;
}

/* checked state */
.bdtax .tp-option:has(> input[type="radio"]:checked){
  border-color:#4338ca;
  background:#f5f6ff;
  box-shadow:0 0 0 3px rgba(67,56,202,.15);
}
.bdtax .tp-option:has(> input[type="radio"]:checked)::before{
  border-color:#4338ca;
  background:#4338ca;
}

/* keyboard focus */
.bdtax .tp-option:focus-within{
  outline:3px solid rgba(16,117,233,.25);
  outline-offset:2px;
}

/* fallback when :has not supported */
@supports not(selector(:has(*))){
  .bdtax .tp-option > input[type="radio"]:checked ~ .tp-title{color:#1d254a}
  .bdtax .tp-option > input[type="radio"]:checked ~ .tp-note{color:#4f46e5}
}

/* -------------------------------------------
   Main Layout & Cards
------------------------------------------- */
.bdtax__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:20px;
  align-items:flex-start;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}

/* -------------------------------------------
   Form Fields
------------------------------------------- */
.field{
  margin:14px 0;
}
.field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  font-size:15px;
}
.field small.hint{
  color:var(--muted);
  display:block;
  margin-top:4px;
  font-size:13px;
}
.field .control{
  position:relative;
  display:block;
}
.field .control .prefix{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:13px;
  color:var(--muted);
}
.field .control input[type="number"],
.field .control input[type="text"],
.field select{
  width:100%;
  padding:10px 12px;
  padding-left:50px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:15px;
  height:44px;
}
input[disabled]{
  background:#f8fafc;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.field--inline{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  align-items:end;
}
.field--two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.divider{
  height:1px;
  background:var(--line);
  margin:18px 0;
}

/* number input look */
.bdtax input[type="number"]{text-align:right}
.bdtax input[type="number"]::-webkit-outer-spin-button,
.bdtax input[type="number"]::-webkit-inner-spin-button{
  margin:0;
  -webkit-appearance:none;
}
.bdtax input[type="number"]{appearance:textfield}

/* focus (a11y) */
.bdtax :focus-visible{
  outline:3px solid rgba(16,117,233,.28);
  outline-offset:2px;
  border-radius:10px;
}

/* Actual Investment input – make clickable */
.bdtax .open-investment{
  cursor:pointer;
  transition:box-shadow .2s,border-color .2s;
}
.bdtax .open-investment:hover,
.bdtax .open-investment:focus-within{
  box-shadow:0 0 0 3px rgba(16,117,233,.2);
}
.bdtax .open-investment input[readonly]{
  cursor:pointer;
  background:#fff;
}

/* -------------------------------------------
   Buttons
------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
}
.btn.primary{
  background:var(--pr);
  color:#fff;
  border-color:transparent;
}
.btn.ghost{
  background:#fff;
  color:var(--pr);
  border:1px solid var(--pr);
}
.btn.block{
  display:block;
  width:100%;
  margin-top:8px;
  text-align:center;
}
.actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

/* -------------------------------------------
   Disclaimer
------------------------------------------- */
.disclaimer{
  margin-top:16px;
  font-size:12px;
  color:var(--warn);
  border:1px dashed #fecaca;
  background:#fff1f2;
  padding:10px 12px;
  border-radius:10px;
}

/* -------------------------------------------
   Right Column (Tabs / Summary)
------------------------------------------- */
.bdtax__side{
  position:sticky;
  top:20px;
}
.tabs{
  display:flex;
  gap:6px;
  margin-bottom:8px;
}
.tab{
  flex:1;
  background:#eef2ff;
  color:#3730a3;
  border:none;
  padding:10px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.tab.active{
  background:#1075E9;
  color:#fff;
}
.tabpanel{display:none}
.tabpanel.active{display:block}

.summary{
  list-style:none;
  margin:0;
  padding:0;
}
.summary li{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px dashed var(--line);
}
.summary li.total{
  font-weight:800;
}
.summary strong{
  font-variant-numeric:tabular-nums;
}

.table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:14px;
}
.table th,
.table td{
  border:1px solid var(--line);
  padding:8px 10px;
  text-align:left;
  vertical-align:top;
}

.list{
  margin:6px 0 0 20px;
}
.note{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* -------------------------------------------
   Modal – generic container (used by both
   Investment & Email modals)
------------------------------------------- */
.bdtax-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
}
.bdtax-modal.active{
  display:block;
}
.bdtax-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.55);
}
.bdtax-modal__card{
  position:relative;
  width:min(1100px, 98vw);   /* 🔁 ছিল 900px / 95vw */
  margin:4vh auto;
  background:#fff;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 25px 60px rgba(17,24,39,.2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-height:min(92vh,760px);
}

.bdtax-modal__head{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f9fafb;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.bdtax-modal__head h3{
  font-size:20px;
  font-weight:700;
  color:#111827;
  margin:0;
}
.bdtax-modal__close{
  width:36px;
  height:36px;
  border-radius:8px;
  border:none;
  background:#f3f4f6;
  font-size:18px;
  cursor:pointer;
  color:#374151;
  transition:background .2s;
}
.bdtax-modal__close:hover{
  background:#e5e7eb;
}
.bdtax-modal__body{
  flex:1 1 auto;
  overflow:auto;
  padding:18px 26px;   /* 🔁 both direction একটু বেশি */
  background:#fdfdfd;
}

.bdtax-modal__foot{
  position:sticky;
  bottom:0;
  z-index:2;
  background:#fff;
  border-top:1px solid #e5e7eb;
  padding:12px 18px;
  box-shadow:0 -6px 12px rgba(0,0,0,.05);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.bdtax-modal__foot .btn.primary{
  background:#1075E9;
  color:#fff;
  padding:10px 24px;
  border-radius:10px;
  font-weight:700;
  border:none;
}
.bdtax-modal__foot .btn.primary:hover{
  background:#0b5ec2;
}

/* subtle scroll shadows */
.bdtax-modal__body::before,
.bdtax-modal__body::after{
  content:"";
  position:sticky;
  left:0;
  right:0;
  height:14px;
  display:block;
  z-index:1;
}
.bdtax-modal__body::before{
  top:0;
  box-shadow:inset 0 10px 8px -10px rgba(0,0,0,.15);
}
.bdtax-modal__body::after{
  bottom:0;
  box-shadow:inset 0 -10px 8px -10px rgba(0,0,0,.15);
}

/* -------------------------------------------
   Investment Modal – NBR-style table layout
------------------------------------------- */



.inv-title-row{
  margin:0 0 10px;
  font-size:15px;
  font-weight:600;
}

/* each row behaves like table row but with CSS grid */
.inv-row{
  display:grid;
  grid-template-columns:2.1fr 2.4fr 1.4fr 1.4fr; /* middle col wider */
  align-items:center;
  border-bottom:1px solid #e5e7eb;
  padding:8px 0;
}

.inv-row.inv-head{
  font-weight:600;
  background:#f9fafb;
  border-top:1px solid #e5e7eb;
}
.inv-row.inv-head .inv-cell{
  padding-bottom:6px;
}

.inv-cell{
  padding-right:12px;
  font-size:13px;
}
.inv-cell.name{
  display:flex;
  align-items:center;
  gap:6px;
}

.inv-input{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border-radius:4px;
  border:1px solid #d1d5db;
  font-size:13px;
  background:#fff;
  text-align:right;
}
.inv-input:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.2);
}
.inv-input[disabled]{
  background:#f9fafb;
}

.inv-cell.max,
.inv-cell.rebate{
  font-size:13px;
  color:#374151;
}

/* total row */
.inv-row.inv-total-row{
  background:#f9fafb;
  font-weight:600;
}
.inv-total-label{
  font-size:13px;
}
.inv-total-display{
  padding:6px 8px;
  border-radius:4px;
  border:1px solid #d1d5db;
  background:#f3f4f6;
  font-variant-numeric:tabular-nums;
}

/* summary below table */
.inv-summary-row{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #e5e7eb;
}
.inv-summary-row .allow-head{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:6px;
}
.inv-summary-row .pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#fef3c7;
  color:#92400e;
  font-size:11px;
  font-weight:600;
}
.inv-summary-row .allow-hint{
  font-size:11px;
  color:#6b7280;
}
.allow-input{
  background:#f9fafb;
}

/* LIP – “10% of policy value” pair */
.lip-max-row{
  display:flex;
  align-items:center;
  gap:4px;
}
.lip-max-row .lip-of{
  font-size:11px;
  color:#6b7280;
}

/* info tooltip bubbles */
.inv-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid #d1d5db;
  font-size:11px;
  color:#4b5563;
  cursor:pointer;
  position:relative;
}
.inv-info::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  top:115%;
  transform:translateX(-50%);
  min-width:220px;
  max-width:320px;
  padding:8px 10px;
  background:#111827;
  color:#f9fafb;
  border-radius:6px;
  font-size:11px;
  line-height:1.4;
  box-shadow:0 8px 14px rgba(15,23,42,.25);
  opacity:0;
  visibility:hidden;
  z-index:20;
}
.inv-info:hover::after,
.inv-info:focus::after{
  opacity:1;
  visibility:visible;
}

/* warning under Actual Investment (added by JS) */
.inv-warning{
  color:#dc2626;
  font-size:12px;
  margin-top:4px;
}

/* -------------------------------------------
   Responsive
------------------------------------------- */
@media (max-width:980px){
  .bdtax__layout{grid-template-columns:1fr}
  .bdtax__side{position:relative;top:auto}
  .field--inline{grid-template-columns:1fr}
  .field--two{grid-template-columns:1fr}
}
@media (max-width:720px){
  .bdtax-modal__foot .btn.primary{
    width:100%;
    height:44px;
    border-radius:10px;
  }
}
@media (max-width:640px){
  /* investment rows become 2x2 grid for mobile */
  .inv-row{
    grid-template-columns:1.6fr 1.4fr;
    grid-template-rows:auto auto;
    row-gap:4px;
  }
  .inv-row .inv-cell.max{
    grid-column:1/2;
  }
  .inv-row .inv-cell.rebate{
    grid-column:2/3;
  }
}