/* ==========================================================
   NATURAL ASILIA — HAIR QUIZ
   Botanical / apothecary visual system.
   Tokens:
     --na-purple  #652b7b  brand primary (from packages.css)
     --na-purple-d #451d5c deep purple (headings, pressed states)
     --na-cream   #faf6ef  brand background
     --na-paper   #fffdf8  card surface, slightly lifted off cream
     --na-gold    #b8863b  shea-butter gold accent (progress, highlights)
     --na-green   #6f7d4a  herbal-leaf accent (secondary, growth)
     --na-ink     #2c2130  deep plum-black text
   ========================================================== */

:root{
  --na-purple:#652b7b;
  --na-purple-d:#451d5c;
  --na-cream:#faf6ef;
  --na-paper:#fffdf8;
  --na-gold:#b8863b;
  --na-green:#6f7d4a;
  --na-ink:#2c2130;
}

.quiz-page{
  background:
    radial-gradient(ellipse 900px 500px at 10% -10%, rgba(101,43,123,.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(184,134,59,.12), transparent 55%),
    var(--na-cream);
  min-height:100vh;
  color:var(--na-ink);
}

.quiz-hero{
  padding:64px 0 24px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.quiz-hero .eyebrow{
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--na-gold);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.quiz-hero .eyebrow::before,
.quiz-hero .eyebrow::after{
  content:"";
  width:28px;
  height:1px;
  background:var(--na-gold);
  opacity:.6;
}
.quiz-hero h1{
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:var(--na-purple-d);
  font-size:clamp(2rem, 4.5vw, 3rem);
  margin:14px 0 10px;
}
.quiz-hero h1 em{
  font-style:italic;
  color:var(--na-gold);
}
.quiz-hero p{
  font-family:'Poppins',sans-serif;
  color:#5c5164;
  max-width:520px;
  margin:0 auto;
  font-size:1rem;
}

/* -------- Leaf progress trail (signature element) -------- */
.leaf-trail{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:28px auto 0;
  max-width:420px;
  padding:0 16px;
}
.leaf-trail .leaf-track{
  flex:1;
  height:3px;
  background:rgba(101,43,123,.15);
  border-radius:2px;
  position:relative;
  overflow:hidden;
}
.leaf-trail .leaf-track .fill{
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(90deg, var(--na-green), var(--na-gold));
  border-radius:2px;
  transition:width .5s ease;
}
.leaf-trail .leaf-node{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--na-paper);
  border:2px solid rgba(101,43,123,.18);
  color:rgba(101,43,123,.35);
  font-size:.85rem;
  flex-shrink:0;
  transition:all .35s ease;
}
.leaf-trail .leaf-node.done{
  background:var(--na-green);
  border-color:var(--na-green);
  color:#fff;
}
.leaf-trail .leaf-node.current{
  background:var(--na-purple);
  border-color:var(--na-purple);
  color:#fff;
  box-shadow:0 0 0 5px rgba(101,43,123,.14);
}
.quiz-step-label{
  text-align:center;
  font-family:'Poppins',sans-serif;
  font-size:.82rem;
  color:var(--na-purple);
  font-weight:600;
  letter-spacing:.04em;
  margin-top:10px;
}

/* -------- Quiz card -------- */
.quiz-wrap{
  max-width:640px;
  margin:0 auto;
  padding:32px 16px 80px;
}
.quiz-card{
  background:var(--na-paper);
  border-radius:22px;
  border:1px solid rgba(101,43,123,.10);
  box-shadow:0 24px 60px -30px rgba(69,29,92,.35);
  padding:40px 36px;
  position:relative;
  overflow:hidden;
}
.quiz-card::before{
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:180px; height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(184,134,59,.14), transparent 70%);
}
@media (max-width:576px){
  .quiz-card{padding:28px 20px;}
}

.q-icon{
  width:52px; height:52px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--na-purple), var(--na-purple-d));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  margin-bottom:18px;
}
.q-title{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:1.5rem;
  color:var(--na-purple-d);
  margin-bottom:6px;
}
.q-subtitle{
  font-family:'Poppins',sans-serif;
  color:#7a6f82;
  font-size:.92rem;
  margin-bottom:26px;
}

/* -------- Options -------- */
.q-options{
  display:grid;
  gap:12px;
}
.q-options.grid-2{
  grid-template-columns:repeat(2,1fr);
}
@media (max-width:480px){
  .q-options.grid-2{grid-template-columns:1fr;}
}

.q-option{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:14px;
  border:1.5px solid rgba(101,43,123,.14);
  background:#fff;
  cursor:pointer;
  text-align:left;
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
  font-family:'Poppins',sans-serif;
}
.q-option:hover{
  border-color:var(--na-gold);
  transform:translateY(-1px);
}
.q-option.selected{
  border-color:var(--na-purple);
  background:linear-gradient(0deg, rgba(101,43,123,.06), rgba(101,43,123,.06)), #fff;
  box-shadow:0 6px 18px -10px rgba(101,43,123,.4);
}
.q-option .opt-icon{
  width:40px; height:40px;
  border-radius:10px;
  background:var(--na-cream);
  color:var(--na-purple);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
  flex-shrink:0;
  transition:background .2s ease, color .2s ease;
}
.q-option.selected .opt-icon{
  background:var(--na-purple);
  color:#fff;
}
.q-option .opt-text strong{
  display:block;
  font-size:.98rem;
  color:var(--na-ink);
  font-weight:600;
}
.q-option .opt-text span{
  display:block;
  font-size:.8rem;
  color:#8a7f91;
  margin-top:2px;
}
.q-option .opt-check{
  margin-left:auto;
  width:22px;height:22px;
  border-radius:50%;
  border:1.5px solid rgba(101,43,123,.25);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:.7rem;
}
.q-option.selected .opt-check{
  background:var(--na-purple);
  border-color:var(--na-purple);
}

/* -------- Nav buttons -------- */
.quiz-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:30px;
}
.quiz-btn{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:.92rem;
  padding:12px 26px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:all .2s ease;
}
.quiz-btn-primary{
  background:var(--na-purple);
  color:#fff;
  box-shadow:0 10px 24px -10px rgba(101,43,123,.55);
}
.quiz-btn-primary:hover{background:var(--na-purple-d);}
.quiz-btn-primary:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
}
.quiz-btn-ghost{
  background:transparent;
  color:var(--na-purple);
  padding:12px 8px;
}
.quiz-btn-ghost:hover{color:var(--na-purple-d);}
.quiz-btn-ghost:disabled{opacity:0;pointer-events:none;}

/* -------- Contact step -------- */
.q-form-group{margin-bottom:18px;}
.q-form-group label{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:.85rem;
  font-weight:600;
  color:var(--na-purple-d);
  margin-bottom:6px;
}
.q-form-group input{
  width:100%;
  padding:13px 16px;
  border-radius:12px;
  border:1.5px solid rgba(101,43,123,.18);
  font-family:'Poppins',sans-serif;
  font-size:.95rem;
  background:#fff;
  color:var(--na-ink);
}
.q-form-group input:focus{
  outline:none;
  border-color:var(--na-purple);
  box-shadow:0 0 0 4px rgba(101,43,123,.10);
}
.q-form-note{
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  color:#8a7f91;
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:4px;
}

/* -------- Loading -------- */
.quiz-loading{
  text-align:center;
  padding:50px 20px;
}
.quiz-loading .spinner{
  width:48px;height:48px;
  border-radius:50%;
  border:3px solid rgba(101,43,123,.15);
  border-top-color:var(--na-purple);
  margin:0 auto 20px;
  animation:na-spin 1s linear infinite;
}
@keyframes na-spin{to{transform:rotate(360deg);}}
.quiz-loading p{
  font-family:'Poppins',sans-serif;
  color:var(--na-purple-d);
  font-weight:500;
}

/* -------- Result -------- */
.result-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(111,125,74,.12);
  color:var(--na-green);
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:999px;
  margin-bottom:16px;
}
.result-hero-name{
  font-family:'Playfair Display',serif;
  color:var(--na-purple-d);
  font-size:clamp(1.6rem,4vw,2.1rem);
  font-weight:700;
  margin-bottom:4px;
}
.result-sub{
  font-family:'Poppins',sans-serif;
  color:#7a6f82;
  margin-bottom:22px;
  font-size:.95rem;
}
.result-card-img{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:20px;
  aspect-ratio:16/9;
  background:var(--na-cream);
}
.result-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
.result-price-row{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:14px 0 6px;
}
.result-price-row .old{
  text-decoration:line-through;
  color:#b5aabc;
  font-family:'Poppins',sans-serif;
  font-size:.9rem;
}
.result-price-row .new{
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:var(--na-purple-d);
  font-size:1.6rem;
}
.result-includes{
  list-style:none;
  padding:0;
  margin:16px 0 26px;
  display:grid;
  gap:10px;
}
.result-includes li{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Poppins',sans-serif;
  font-size:.92rem;
  color:var(--na-ink);
}
.result-includes li i{color:var(--na-green);font-size:1.05rem;}

.result-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.result-actions .btn-wa{
  flex:1;
  min-width:200px;
  background:#25D366;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:14px 24px;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  transition:filter .2s ease;
}
.result-actions .btn-wa:hover{filter:brightness(.94); color:#fff;}
.result-actions .btn-retake{
  background:transparent;
  border:1.5px solid rgba(101,43,123,.25);
  color:var(--na-purple);
  border-radius:999px;
  padding:14px 22px;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.result-actions .btn-retake:hover{border-color:var(--na-purple); color:var(--na-purple-d);}

.result-offer{
  margin-top:24px;
  background:linear-gradient(120deg, rgba(101,43,123,.08), rgba(184,134,59,.10));
  border:1px dashed rgba(184,134,59,.5);
  border-radius:14px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  font-family:'Poppins',sans-serif;
}
.result-offer i{font-size:1.5rem;color:var(--na-gold);}
.result-offer strong{color:var(--na-purple-d);}
.result-offer p{margin:0;font-size:.86rem;color:#5c5164;}

.result-also{
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid rgba(101,43,123,.10);
}
.result-also h6{
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#8a7f91;
  margin-bottom:14px;
}
.result-also-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  text-decoration:none;
  color:var(--na-ink);
}
.result-also-item .thumb{
  width:44px;height:44px;
  border-radius:10px;
  background:var(--na-cream);
  flex-shrink:0;
  overflow:hidden;
}
.result-also-item .thumb img{width:100%;height:100%;object-fit:cover;}
.result-also-item strong{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:.9rem;
}
.result-also-item span{
  font-size:.78rem;
  color:#8a7f91;
}