/* Commence Studio — Quiz Widget styles, scoped to .cmc-quiz. Extracted from
   static src/Commence Quiz Widget.html. */


.cmc-quiz{font-family:var(--sans);color:var(--ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.cmc-quiz *,.cmc-quiz *::before,.cmc-quiz *::after{box-sizing:border-box}
.cmc-quiz a{color:inherit;text-decoration:none}
.cmc-quiz button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.cmc-quiz .form-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column;
}
@media (min-width:768px){.cmc-quiz .form-card{padding:36px 40px 32px}}
.cmc-quiz form{display:flex;flex-direction:column;flex:1 1 auto;margin:0}

.cmc-quiz .form-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.cmc-quiz .step-meta{display:flex;align-items:baseline;gap:10px}
.cmc-quiz .step-num{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-2)}
.cmc-quiz .step-of{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle)}
.cmc-quiz .est{font-family:var(--mono);font-size:11px;color:var(--subtle);text-transform:uppercase;letter-spacing:.1em}

.cmc-quiz .progress{height:3px;background:var(--mute-2);border-radius:var(--r-pill);position:relative;overflow:hidden;margin:14px 0 28px}
.cmc-quiz .progress .bar{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:inherit;transition:width .5s var(--ease-out)}

.cmc-quiz .step-pane{display:none;animation:cmcStepIn .4s var(--ease-out) forwards}
.cmc-quiz .step-pane.is-active{display:block}
@keyframes cmcStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.cmc-quiz .step-title{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.4vw,30px);line-height:1.18;letter-spacing:-.015em;margin:0 0 6px;color:var(--ink)}
.cmc-quiz .step-title .it{font-family:var(--serif);font-style:italic;font-weight:400}
.cmc-quiz .step-help{color:var(--subtle);font-size:14.5px;margin:0 0 24px;max-width:54ch}

.cmc-quiz .chip-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.cmc-quiz .chip-opt{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:all .2s var(--ease-out);user-select:none;position:relative}
.cmc-quiz .chip-opt:hover{border-color:var(--ink);background:var(--mute)}
.cmc-quiz .chip-opt input{position:absolute;opacity:0;pointer-events:none}
.cmc-quiz .chip-opt .tick{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--ease-out)}
.cmc-quiz .chip-opt .tick svg{opacity:0;transform:scale(.6);transition:all .2s var(--ease-out);width:9px;height:9px}
.cmc-quiz .chip-opt.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cmc-quiz .chip-opt.is-on .tick{border-color:var(--paper);background:var(--paper)}
.cmc-quiz .chip-opt.is-on .tick svg{opacity:1;transform:scale(1);color:var(--ink)}

.cmc-quiz .card-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}
@media (min-width:560px){.cmc-quiz .card-grid{grid-template-columns:1fr 1fr}}
.cmc-quiz .card-opt{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);cursor:pointer;transition:all .2s var(--ease-out);position:relative}
.cmc-quiz .card-opt:hover{border-color:var(--ink);transform:translateY(-1px)}
.cmc-quiz .card-opt input{position:absolute;opacity:0;pointer-events:none}
.cmc-quiz .card-opt .ttl{font-weight:500;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmc-quiz .card-opt .ic-tick{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--ease-out)}
.cmc-quiz .card-opt .ic-tick svg{opacity:0;transform:scale(.6);transition:all .2s var(--ease-out);width:10px;height:10px;color:var(--paper)}
.cmc-quiz .card-opt .desc{font-size:13px;color:var(--subtle);line-height:1.4}
.cmc-quiz .card-opt.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cmc-quiz .card-opt.is-on .ttl{color:var(--paper)}
.cmc-quiz .card-opt.is-on .desc{color:rgba(247,245,238,.7)}
.cmc-quiz .card-opt.is-on .ic-tick{background:var(--paper);border-color:var(--paper)}
.cmc-quiz .card-opt.is-on .ic-tick svg{opacity:1;transform:scale(1);color:var(--ink)}

.cmc-quiz .field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.cmc-quiz .field-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
@media (min-width:560px){.cmc-quiz .field-row{grid-template-columns:1fr 1fr}}
.cmc-quiz .field-row .field{margin-bottom:0}
.cmc-quiz .label{font-size:13.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px}
.cmc-quiz .label .opt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--quiet);font-weight:400}
.cmc-quiz .help{font-size:12.5px;color:var(--subtle);line-height:1.4}

.cmc-quiz input[type="text"],.cmc-quiz input[type="email"],.cmc-quiz input[type="url"],.cmc-quiz input[type="tel"],.cmc-quiz textarea,.cmc-quiz select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;outline:none;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.cmc-quiz input::placeholder,.cmc-quiz textarea::placeholder{color:var(--quiet)}
.cmc-quiz input:focus,.cmc-quiz textarea:focus,.cmc-quiz select:focus{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(15,15,14,.06)}
.cmc-quiz textarea{min-height:120px;resize:vertical;line-height:1.5}

.cmc-quiz .select-wrap{position:relative}
.cmc-quiz .select-wrap::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-75%) rotate(45deg);pointer-events:none}
.cmc-quiz select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:none}

.cmc-quiz .step-nav{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:auto;padding-top:24px;border-top:1px solid var(--line)}
.cmc-quiz .row-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cmc-quiz .privacy{font-size:12px;color:var(--quiet);line-height:1.5;text-align:left}
.cmc-quiz .btn-back{background:transparent;color:var(--subtle);border:0;padding:10px 4px;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.cmc-quiz .btn-back:hover{color:var(--ink)}
.cmc-quiz .btn-back[disabled]{opacity:0;pointer-events:none}

.cmc-quiz .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-pill);font-weight:500;font-size:15px;letter-spacing:-.005em;transition:transform .25s var(--ease-out),background .25s var(--ease-out);white-space:nowrap;border:1px solid transparent}
.cmc-quiz .btn:hover{transform:translateY(-1px)}
.cmc-quiz .btn-dark{background:var(--ink);color:var(--paper)}
.cmc-quiz .btn-dark:hover{background:var(--ink-2)}
.cmc-quiz .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.cmc-quiz .btn-ghost:hover{background:var(--mute)}
.cmc-quiz .btn .arrow{display:inline-block;transition:transform .25s var(--ease-out)}
.cmc-quiz .btn:hover .arrow{transform:translateX(3px)}
.cmc-quiz .btn[disabled]{opacity:.4;pointer-events:none}

.cmc-quiz .field-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cmc-quiz .suggest{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--subtle);padding:5px 10px;border-radius:var(--r-pill);background:var(--mute);cursor:pointer;transition:all .15s var(--ease-out)}
.cmc-quiz .suggest:hover{background:var(--ink);color:var(--paper)}

.cmc-quiz .review{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.cmc-quiz .review-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px}
.cmc-quiz .review-row:last-child{border-bottom:0}
.cmc-quiz .review-row .k{color:var(--subtle);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;min-width:120px}
.cmc-quiz .review-row .v{color:var(--ink);text-align:right;font-weight:500}
.cmc-quiz .review-row .v.empty{color:var(--quiet);font-weight:400;font-style:italic}
.cmc-quiz .review-edit{background:transparent;color:var(--accent-2);font-size:12px;font-weight:500;padding:0;border-bottom:1px solid var(--accent-2);margin-left:8px}

.cmc-quiz .success{text-align:center;padding:40px 8px 16px}
.cmc-quiz .success .icon{width:72px;height:72px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;margin:0 auto 18px}
.cmc-quiz .success h3{font-family:var(--sans);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:0 0 12px;color:var(--ink)}
.cmc-quiz .success h3 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.cmc-quiz .success p{color:var(--subtle);max-width:46ch;margin:0 auto 22px}
.cmc-quiz .success .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.cmc-quiz .field.has-error input,.cmc-quiz .field.has-error textarea,.cmc-quiz .field.has-error select{border-color:var(--accent-2);box-shadow:0 0 0 4px rgba(177,70,36,.10)}
.cmc-quiz .error-msg{font-size:12.5px;color:var(--accent-2);display:none}
.cmc-quiz .field.has-error .error-msg{display:block}