/* Derma Dance · Quiz „Dobierz pielęgnację" · style v2 (redesign + izolacja od motywu) */
#dd-quiz{
  --dd-bg:#F7F2EA; --dd-surface:#FFFFFF; --dd-ink:#2E2A26; --dd-muted:#8A7E71;
  --dd-gold:#C08A3E; --dd-gold-deep:#A6742D; --dd-gold-soft:#F1E4CD; --dd-gold-tint:#FAF4E9;
  --dd-line:#EDE4D3; --dd-brown:#2B211A; --dd-warn:#B4562E;
  --dd-sh:0 1px 2px rgba(43,33,26,.04), 0 10px 30px rgba(43,33,26,.06);
  --dd-sh-hover:0 2px 4px rgba(43,33,26,.05), 0 14px 34px rgba(43,33,26,.10);
  background:var(--dd-bg); color:var(--dd-ink);
  font-family:'Open Sans',Arial,sans-serif; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; padding:56px 20px 96px; min-height:70vh;
}
#dd-quiz *{box-sizing:border-box; margin:0; padding:0;}

/* ── izolacja od stylów motywu ───────────────────────────── */
#dd-quiz button, #dd-quiz input{
  appearance:none; -webkit-appearance:none; font-family:'Open Sans',Arial,sans-serif;
  background:none; border:0; box-shadow:none; border-radius:0; margin:0;
  text-transform:none; letter-spacing:normal; line-height:1.5; color:inherit;
  font-size:inherit; font-weight:400; text-shadow:none; min-height:0;
}
#dd-quiz h1,#dd-quiz h2,#dd-quiz h3{
  font-family:'Playfair Display',Georgia,serif; font-weight:400;
  text-transform:none; letter-spacing:normal; line-height:1.28; color:var(--dd-ink);
  border:0; background:none; text-shadow:none;
}
#dd-quiz a{color:var(--dd-gold-deep); text-decoration:none; box-shadow:none; border:0;}
#dd-quiz a:hover{color:var(--dd-gold); text-decoration:underline; text-underline-offset:3px;}
#dd-quiz :focus{outline:none;}
#dd-quiz :focus-visible{outline:2px solid var(--dd-gold-deep); outline-offset:3px; border-radius:6px;}

#dd-quiz .dd-wrap{max-width:760px; margin:0 auto;}
#dd-quiz .dd-narrow{max-width:600px; margin:0 auto;}
#dd-quiz h1{font-size:clamp(31px,5vw,42px); margin:0 0 16px;}
#dd-quiz h2{font-size:clamp(23px,3.6vw,29px); margin:0 0 18px;}
#dd-quiz h3{font-size:19px; margin:0 0 8px;}
#dd-quiz .dd-eyebrow{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--dd-gold-deep); margin:0 0 16px;}
#dd-quiz .dd-sub{color:var(--dd-muted); max-width:58ch; font-size:16.5px;}
#dd-quiz .dd-note{font-size:13.5px; color:var(--dd-muted); line-height:1.6;}
#dd-quiz .dd-hint{margin:18px 0 0; padding:3px 0 3px 16px; border-left:2px solid var(--dd-gold); color:var(--dd-muted); font-size:14px; line-height:1.65;}
#dd-quiz .dd-rule{border:0; width:52px; height:2px; background:var(--dd-gold); border-radius:2px; margin:22px 0 26px;}
#dd-quiz .dd-hr{border:0; border-top:1px solid var(--dd-line); margin:44px 0 36px;}

/* ── przyciski ───────────────────────────────────────────── */
#dd-quiz .dd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--dd-gold); color:#FFFFFF; border:1px solid var(--dd-gold);
  border-radius:999px; padding:15px 34px; cursor:pointer; text-align:center;
  font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 8px 20px rgba(192,138,62,.28);
  transition:background .18s, box-shadow .18s, transform .18s;
}
#dd-quiz .dd-btn:hover{background:var(--dd-gold-deep); border-color:var(--dd-gold-deep); color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 24px rgba(166,116,45,.34);}
#dd-quiz .dd-btn[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;}
#dd-quiz .dd-btn-ghost{background:transparent; color:var(--dd-gold-deep); border:1px solid var(--dd-gold); box-shadow:none;}
#dd-quiz .dd-btn-ghost:hover{background:var(--dd-gold-tint); color:var(--dd-gold-deep);}
#dd-quiz .dd-btn-sm{padding:11px 22px; font-size:11.5px;}
#dd-quiz .dd-linkbtn{background:none; border:0; color:var(--dd-muted); font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--dd-line);}
#dd-quiz .dd-linkbtn:hover{color:var(--dd-ink); text-decoration-color:var(--dd-muted);}

/* ── pytania ─────────────────────────────────────────────── */
#dd-quiz .dd-progress{height:4px; background:#EDE3D0; border-radius:999px; overflow:hidden; margin:0 0 40px; position:relative;}
#dd-quiz .dd-progress i{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#D6A75E,var(--dd-gold)); width:0; border-radius:999px; transition:width .4s ease;}
#dd-quiz .dd-step-label{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--dd-muted); margin:0 0 12px;}
#dd-quiz .dd-opts{display:grid; gap:12px; margin:36px 0 46px;}
#dd-quiz .dd-opt{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  background:var(--dd-surface); border:0; border-radius:16px; padding:18px 22px;
  cursor:pointer; font-size:16px; color:var(--dd-ink);
  text-transform:none; letter-spacing:normal; line-height:1.55;
  box-shadow:0 1px 2px rgba(43,33,26,.05);
  transition:box-shadow .18s, transform .18s, background .18s;
}
#dd-quiz .dd-opt:hover{box-shadow:var(--dd-sh-hover); transform:translateY(-1px); background:var(--dd-surface);}
#dd-quiz .dd-opt.is-on{background:var(--dd-gold-tint); box-shadow:inset 0 0 0 1.5px var(--dd-gold), 0 8px 22px rgba(192,138,62,.14);}
#dd-quiz .dd-dot{flex:0 0 22px; height:22px; border:1.5px solid #D8C9AE; border-radius:50%; background:#fff; position:relative; transition:background .15s, border-color .15s;}
#dd-quiz .dd-opt.dd-multi .dd-dot{border-radius:7px;}
#dd-quiz .dd-opt.is-on .dd-dot{background:var(--dd-gold); border-color:var(--dd-gold);}
#dd-quiz .dd-opt.is-on .dd-dot::after{content:''; position:absolute; left:7px; top:3px; width:6px; height:11px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(43deg);}
#dd-quiz .dd-qfoot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:10px;}

/* ── karty produktów ─────────────────────────────────────── */
#dd-quiz .dd-cards{display:grid; gap:16px; margin:26px 0 8px;}
#dd-quiz .dd-card{background:var(--dd-surface); border:0; border-radius:18px; padding:26px 28px; box-shadow:var(--dd-sh);}
#dd-quiz .dd-card-top{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;}
#dd-quiz .dd-w{flex:0 0 auto; background:var(--dd-gold-soft); color:var(--dd-gold-deep); border:0; border-radius:999px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; padding:6px 13px; margin-top:3px; white-space:nowrap;}
#dd-quiz .dd-card h3{flex:1 1 230px; font-size:19px; margin:0;}
#dd-quiz .dd-price{text-align:right; min-width:96px;}
#dd-quiz .dd-price .dd-now{font-family:'Playfair Display',Georgia,serif; font-size:21px; color:var(--dd-ink);}
#dd-quiz .dd-price .dd-was{font-size:13px; color:var(--dd-muted); text-decoration:line-through; display:block;}
#dd-quiz .dd-why{margin:14px 0 18px; color:var(--dd-muted); font-size:15px; line-height:1.7; max-width:60ch;}
#dd-quiz .dd-card-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
#dd-quiz .dd-stock{font-size:12.5px; color:var(--dd-warn);}

/* ── plan, upsell, notki ─────────────────────────────────── */
#dd-quiz .dd-plan{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; margin:26px 0 8px;}
#dd-quiz .dd-plan-col{background:var(--dd-surface); border:0; border-radius:18px; padding:24px 26px; box-shadow:var(--dd-sh);}
#dd-quiz .dd-plan-col h3{font-size:19px; margin:0 0 6px;}
#dd-quiz .dd-plan-col ol{list-style:none; margin:10px 0 0;}
#dd-quiz .dd-plan-col li{position:relative; padding:11px 0 11px 20px; font-size:14.5px; line-height:1.65; border:0;}
#dd-quiz .dd-plan-col li + li{border-top:1px solid #F3ECDE;}
#dd-quiz .dd-plan-col li::before{content:''; position:absolute; left:2px; top:1.32em; width:6px; height:6px; border-radius:50%; background:var(--dd-gold);}
#dd-quiz .dd-upsell{background:var(--dd-gold-tint); border:0; border-radius:22px; padding:26px 26px 22px; margin-top:36px;}
#dd-quiz .dd-upsell .dd-eyebrow{margin-bottom:12px;}
#dd-quiz .dd-upsell .dd-card{box-shadow:0 6px 22px rgba(166,116,45,.10);}
#dd-quiz .dd-safety{margin-top:28px; padding:18px 22px; background:var(--dd-gold-tint); border:0; border-left:3px solid var(--dd-gold); border-radius:14px; font-size:14px; line-height:1.65; color:var(--dd-muted);}
#dd-quiz .dd-sum{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:baseline; margin-top:28px; padding-top:22px; border-top:1px solid var(--dd-line);}
#dd-quiz .dd-sum b{font-family:'Playfair Display',Georgia,serif; font-size:24px; font-weight:400;}

/* ── e-mail ──────────────────────────────────────────────── */
#dd-quiz .dd-mail{background:var(--dd-brown); color:#F3EBDD; border:0; border-radius:22px; padding:36px 34px; margin-top:48px; box-shadow:0 18px 44px rgba(43,33,26,.22);}
#dd-quiz .dd-mail h3{color:#F8F1E3; font-size:22px; margin:0 0 8px;}
#dd-quiz .dd-mail p{font-size:14.5px; line-height:1.65; color:#CFC1AD;}
#dd-quiz .dd-mail-row{display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 14px;}
#dd-quiz .dd-mail input[type=text], #dd-quiz .dd-mail input[type=email]{
  flex:1 1 210px; padding:14px 18px; border:1px solid #57493B; border-radius:12px;
  background:#3A2E24; color:#F6EFE2; font-size:15px; line-height:1.4; transition:border-color .15s;
}
#dd-quiz .dd-mail input:focus{border-color:var(--dd-gold);}
#dd-quiz .dd-mail input::placeholder{color:#9A8B78;}
#dd-quiz .dd-consent{display:flex; gap:12px; align-items:flex-start; font-size:12.5px; color:#CFC1AD; line-height:1.6; cursor:pointer;}
#dd-quiz .dd-consent input{flex:0 0 auto; width:17px; height:17px; margin-top:2px; accent-color:var(--dd-gold); appearance:auto; -webkit-appearance:auto;}
#dd-quiz .dd-consent a{color:#E7CC97;}
#dd-quiz .dd-mail .dd-btn{margin-top:18px;}
#dd-quiz .dd-mail-ok{margin-top:12px; color:#EFE3CD; font-size:14px;}
#dd-quiz .dd-check{width:54px; height:54px; border-radius:50%; background:var(--dd-gold); position:relative; margin:2px 0 18px; box-shadow:0 10px 24px rgba(192,138,62,.45);}
#dd-quiz .dd-check::after{content:''; position:absolute; left:20px; top:13px; width:12px; height:21px; border-right:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(43deg);}

#dd-quiz .dd-screen{animation:ddfade .4s ease;}
@keyframes ddfade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ #dd-quiz .dd-screen{animation:none;} #dd-quiz .dd-progress i{transition:none;} #dd-quiz .dd-btn, #dd-quiz .dd-opt{transition:none;} }
@media (max-width:560px){
  #dd-quiz{padding:36px 16px 64px;}
  #dd-quiz .dd-card{padding:22px 20px;}
  #dd-quiz .dd-price{text-align:left; min-width:0;}
  #dd-quiz .dd-mail{padding:28px 22px;}
}