/* ============================================================
   Pakka Area — report-flow.css (get-my-report funnel styles)
   Tokens & reset live in base.css.
   ============================================================ */

body{ background:var(--bg); line-height:1.55; }
.top{ background:var(--ink); color:#fff; padding:15px 0; }
.wrap{ max-width:720px; margin:0 auto; padding:0 20px; }
.brand{ display:flex; align-items:center; gap:10px; }
.mark{ width:28px; height:28px; border:2.5px solid var(--teal); border-radius:8px; position:relative; }
.mark:before{ content:""; position:absolute; left:5px; right:5px; bottom:5px; height:7px; background:var(--teal); border-radius:2px; }
.mark:after{ content:""; position:absolute; left:5px; top:5px; width:7px; height:7px; border-radius:50%; background:#fff; }
.brand b{ font-size:17px; font-weight:800; } .brand b span{ color:var(--teal-l); }

.head{ padding:30px 0 6px; }
.head h1{ font-size:25px; font-weight:800; }
.head p{ color:var(--grey); margin-top:7px; font-size:15px; }

.pbar{ position:sticky; top:0; z-index:20; background:var(--bg); padding:14px 0 8px; }
.pbar-track{ height:7px; background:#E2E8EC; border-radius:5px; overflow:hidden; }
.pbar-fill{ height:100%; width:13%; background:var(--teal); border-radius:5px; transition:.3s; }
.pbar-label{ font-size:12px; color:var(--grey); margin-top:6px; font-weight:600; }

.step{ display:none; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; margin-top:16px; }
.step.active{ display:block; }
.step .kick{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--teal-d); font-weight:800; }
.step h2{ font-size:20px; margin:4px 0 4px; }
.step .why{ font-size:13px; color:var(--grey); background:var(--bg); border-left:3px solid var(--teal); padding:8px 12px; border-radius:6px; margin-bottom:18px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px; }
.field .hint{ font-weight:400; color:var(--grey); font-size:12.5px; }
input[type=text], input[type=email], input[type=tel], select, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:15px; font-family:inherit; background:#fff; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(74,91,214,.12); }
textarea{ min-height:70px; resize:vertical; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ border:1px solid var(--line); background:#fff; border-radius:30px; padding:9px 16px; font-size:14px; cursor:pointer; user-select:none; transition:.12s; }
.chip:hover{ border-color:var(--teal); } .chip.sel{ background:var(--ink); color:#fff; border-color:var(--ink); }
.slider-row{ display:flex; align-items:center; gap:14px; }
.slider-row input[type=range]{ flex:1; accent-color:var(--teal); }
.slider-val{ font-size:13px; color:var(--grey); min-width:120px; text-align:right; font-weight:600; }

.rank-list{ list-style:none; }
.rank-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.rank-item .num{ width:26px; height:26px; border-radius:50%; background:var(--teal); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rank-item .nm{ flex:1; font-size:14.5px; font-weight:600; }
.rank-item .ar button{ border:1px solid var(--line); background:#fff; border-radius:6px; width:28px; height:28px; cursor:pointer; font-size:14px; color:var(--grey); }

/* payment step */
.pay-grid{ display:grid; grid-template-columns:200px 1fr; gap:22px; align-items:start; }
.qr-box{ border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center; background:#fff; }
.qr-img{ width:168px; height:168px; border-radius:10px; object-fit:contain; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--grey); font-size:12px; margin:0 auto; border:1px dashed var(--line); }
.qr-box .amt{ font-size:22px; font-weight:800; margin-top:12px; }
.qr-box .upi{ font-size:13px; color:var(--grey); margin-top:2px; }
.qr-box .upi b{ color:var(--ink); }
.pay-steps{ list-style:none; }
.pay-steps li{ position:relative; padding-left:26px; margin-bottom:11px; font-size:14px; }
.pay-steps li b{ display:inline-block; }
.pay-steps .pn{ position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:var(--teal); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.uploader{ border:2px dashed var(--teal); border-radius:12px; padding:20px; text-align:center; background:#EEF0FC; cursor:pointer; margin-top:6px; }
.uploader.has{ border-style:solid; background:#E7F6EC; }
.uploader input{ display:none; }
.uploader .u-ic{ font-size:24px; font-weight:800; color:var(--teal-d); }
.uploader p{ font-size:13.5px; color:var(--ink2); margin-top:4px; }
.uploader .fname{ font-size:13px; color:var(--green); font-weight:700; margin-top:6px; display:none; }
.secure{ font-size:12px; color:var(--grey); margin-top:12px; }

/* review */
.rev{ background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:8px 16px; }
.rev .r{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.rev .r:last-child{ border-bottom:none; }
.rev .r .k{ color:var(--grey); } .rev .r .v{ font-weight:600; text-align:right; }
.consent{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13px; color:var(--grey); }
.consent input{ margin-top:3px; }

.nav{ display:flex; justify-content:space-between; margin-top:22px; }
.btn{ border:none; border-radius:30px; padding:13px 26px; font-size:15px; font-weight:700; cursor:pointer; }
.btn-prev{ background:#fff; border:1px solid var(--line); color:var(--grey); }
.btn-next{ background:var(--cta); color:#fff; }
.btn-next:disabled{ opacity:.5; cursor:not-allowed; }

/* confirmation */
.done{ display:none; background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; margin-top:16px; }
.done.show{ display:block; }
.done .tick{ width:62px; height:62px; border-radius:50%; background:#E7F6EC; color:var(--green); font-size:30px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.done h2{ font-size:23px; text-align:center; }
.done .sub{ text-align:center; color:var(--grey); font-size:15px; margin-top:6px; }
.timeline{ margin-top:24px; }
.tl{ display:flex; gap:14px; padding-bottom:18px; position:relative; }
.tl:before{ content:""; position:absolute; left:13px; top:26px; bottom:-4px; width:2px; background:var(--line); }
.tl:last-child:before{ display:none; }
.tl .dot{ width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; z-index:1; }
.tl.done-step .dot{ background:var(--green); color:#fff; }
.tl.next .dot{ background:var(--amber); color:#fff; }
.tl.wait .dot{ background:#E7EDF0; color:var(--grey); }
.tl .c h4{ font-size:15px; } .tl .c p{ font-size:13px; color:var(--grey); }
.done .note{ background:var(--bg); border-radius:10px; padding:14px 16px; font-size:13px; color:var(--ink2); margin-top:14px; }
.done .note b{ color:var(--ink); }

@media(max-width:600px){ .pay-grid{ grid-template-columns:1fr; } }
.brand b,.brandname{ white-space:nowrap; } /* PAKKA-NOWRAP */