/* BizTorq — eCommerce Platform Picker (pp- prefix; builds on cost-calculator.css) */

/* Quiz */
.pp-quiz-wrap { background:#F7F5FC; padding:clamp(28px,4vw,56px) 0; }
.pp-quiz { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.pp-step { background:#fff; border:1px solid #E3DDF6; border-radius:4px; padding:clamp(18px,2.4vw,28px); margin:0; min-width:0; }
.pp-step legend { float:left; width:100%; padding:0; margin:0 0 16px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:clamp(18px,2vw,22px); display:flex; gap:10px; align-items:center; }
.pp-step legend + * { clear:both; }
.pp-options { display:flex; flex-direction:column; gap:10px; }
.pp-option { position:relative; cursor:pointer; }
.pp-option input { position:absolute; opacity:0; pointer-events:none; }
.pp-option span { display:block; border:1.5px solid #E3DDF6; border-radius:4px; padding:14px 16px 14px 46px; font-size:15.5px; font-weight:600; line-height:1.4; position:relative; transition:border-color .15s, background .15s; }
.pp-option span::before { content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; border:2px solid #C9BFEA; border-radius:50%; background:#fff; }
.pp-option:hover span { border-color:#A88BFF; }
.pp-option input:checked + span { border-color:#6C3FD1; background:#F5F1FF; box-shadow:inset 0 0 0 1px #6C3FD1; }
.pp-option input:checked + span::before { border-color:#6C3FD1; background:radial-gradient(circle, #6C3FD1 0 5px, #fff 6px); }
.pp-option input:focus-visible + span { outline:2px solid #6C3FD1; outline-offset:2px; }
.pp-nav { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; }
.pp-nav:empty { display:none; }
.pp-back { background:none; border:none; font-family:inherit; font-size:14.5px; font-weight:700; color:#5B2BC4; cursor:pointer; padding:8px 0; }
.pp-submit { width:auto; margin-left:auto; }
.pp-next { margin-left:auto; font-family:inherit; font-size:14.5px; font-weight:700; padding:10px 18px; border-radius:3px; border:1.5px solid #191233; background:#fff; color:#191233; cursor:pointer; }
.pp-next:hover { background:#191233; color:#fff; }
.pp-quiz:not(.is-stepped) .pp-next { display:none; }
.pp-progress { display:none; }

/* Step mode (JavaScript on): one question at a time */
.pp-quiz.is-stepped .pp-step { display:none; }
.pp-quiz.is-stepped .pp-step.is-active { display:block; }
.pp-quiz.is-stepped .pp-nojs-submit { display:none; }
.pp-quiz.is-stepped .pp-progress { display:block; font-size:13.5px; font-weight:700; color:#5A566E; }
.pp-progress-bar { height:6px; background:#E3DDF6; border-radius:4px; margin-top:8px; overflow:hidden; }
.pp-progress-bar span { display:block; height:100%; width:12%; background:#6C3FD1; border-radius:4px; transition:width .25s; }
.pp-quiz:not(.is-stepped) .pp-back { display:none; }
.pp-quiz:not(.is-stepped) .pp-submit { display:none; }

.pp-again { max-width:760px; margin:0 auto; }
.pp-again > summary { cursor:pointer; font-weight:700; font-size:16px; color:#5B2BC4; padding:6px 0 16px; }

/* Result */
.pp-result { background:#F7F5FC; padding:clamp(28px,4vw,56px) 0 clamp(12px,2vw,24px); }
.pp-winner { background:#fff; border:1px solid #E3DDF6; border-top:5px solid #6C3FD1; border-radius:4px; padding:clamp(20px,3vw,34px); }
.pp-winner h2 { font-size:clamp(28px,4vw,42px); margin:8px 0 6px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.pp-match { font-size:15px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; background:#6C3FD1; color:#fff; padding:5px 12px; border-radius:16px; letter-spacing:0; }
.pp-tagline { font-size:17px; color:#3E3A52; margin:0 0 14px; }
.pp-close { background:#FFF7E6; border:1px solid #F1D9A6; padding:12px 14px; border-radius:4px; font-size:14.5px; line-height:1.55; }
.pp-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px 32px; margin-top:8px; }
.pp-cols h3 { font-size:16px; margin:14px 0 8px; }
.pp-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.pp-list li { position:relative; padding-left:28px; font-size:15px; line-height:1.55; color:#2A2640; }
.pp-list li::before { position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:800; color:#fff; display:flex; align-items:center; justify-content:center; }
.pp-list-yes li::before { content:"✓"; background:#1F9D55; }
.pp-list-watch li::before { content:"!"; background:#C98A0B; }
.pp-cost { margin:18px 0 0; padding-top:14px; border-top:1px solid #EEEAFA; font-size:15px; line-height:1.6; }
.pp-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; align-items:center; }
.pp-actions .cc-btn { width:auto; }
.pp-btn-small { font-family:inherit; font-size:14px; font-weight:700; padding:12px 16px; border-radius:3px; border:1.5px solid #191233; background:#fff; color:#191233; cursor:pointer; }
.pp-btn-small:hover { background:#191233; color:#fff; }

.pp-h3 { font-size:clamp(19px,2.2vw,23px); margin:28px 0 12px; }
.pp-ranking { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.pp-rank { background:#fff; border:1px solid #E3DDF6; border-radius:4px; padding:14px 16px; }
.pp-rank.is-top { border-color:#6C3FD1; box-shadow:inset 0 0 0 1px #6C3FD1; }
.pp-rank-head { display:flex; justify-content:space-between; font-size:15px; margin-bottom:8px; }
.pp-bar { height:8px; background:#ECE8F7; border-radius:4px; overflow:hidden; }
.pp-bar span { display:block; height:100%; background:#A88BFF; border-radius:4px; }
.pp-rank.is-top .pp-bar span { background:#6C3FD1; }
.pp-rank p { font-size:13.5px; color:#5A566E; line-height:1.5; margin:8px 0 0; }

@media (max-width:600px) {
  .pp-actions .cc-btn, .pp-btn-small { width:100%; text-align:center; }
  /* Keep Next / Show buttons clear of the site's floating WhatsApp button */
  .pp-quiz-wrap { padding-bottom:96px; }
  .pp-nav { flex-wrap:wrap; }
  .pp-next, .pp-submit { width:100%; margin-left:0; padding:14px 18px; }
  .pp-back { order:2; }
}