/* assets/style.css */

/* container */
.but-check{
  background:var(--card, #fff);
  border:1px solid var(--ring, color-mix(in srgb, currentColor 14%, transparent));
  border-radius:var(--radius,18px);
  box-shadow:var(--shadow, 0 12px 30px rgba(2,8,23,.06));
  padding:18px;
}
.but-check .but-kicker{
  display:inline-block;
  background:var(--wp--preset--color--primary, var(--brand));
  color:var(--wp--preset--color--background, var(--contrast, #fff));
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.but-check .but-title{margin:0 0 12px}

/* progress */
.but-check .but-stepper{
  height:6px;
  background:color-mix(in srgb, var(--wp--preset--color--primary, var(--brand)) 18%, transparent);
  border-radius:999px;
  overflow:hidden;
  margin:8px 0 18px;
}
.but-check .but-progress{
  height:6px;
  background:var(--wp--preset--color--primary, var(--brand));
  width:0;
  border-radius:999px;
  transition:width .35s ease;
}

/* steps */
.but-check .but-step{
  border:1px solid var(--ring, color-mix(in srgb, currentColor 16%, transparent));
  border-radius:var(--radius,18px);
  padding:20px;
  margin:0 0 14px;
  background:var(--card, #fff);
}
.but-check .but-q{margin:0 0 12px}

/* split layout: two areas */
.but-check .but-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:12px 0 18px;
}
@media (max-width:782px){
  .but-check .but-split{grid-template-columns:1fr}
}

.but-check .but-choice{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--ring, color-mix(in srgb, currentColor 16%, transparent));
  border-radius:14px;
  padding:1rem 1.2rem;
  background:var(--card, #fff);
  cursor:pointer;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  outline:none;
}
.but-check .but-choice:hover{
  border-color:var(--wp--preset--color--primary, var(--brand));
  background:color-mix(in srgb, var(--wp--preset--color--primary, var(--brand)) 5%, var(--card, #fff));
}
.but-check .but-choice:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary, var(--brand)) 25%, transparent);
}
.but-check .but-choice[aria-pressed="true"]{
  border-color:var(--wp--preset--color--primary, var(--brand));
  background:color-mix(in srgb, var(--wp--preset--color--primary, var(--brand)) 8%, var(--card, #fff));
}

.but-check .but-choice-text strong{display:block;font-size:16px}
.but-check .but-choice-text small{display:block;opacity:.75;font-size:12px}

.but-check .but-choice .but-radio{
  width:1.3rem;height:1.3rem;
  accent-color:var(--wp--preset--color--primary, var(--brand));
  margin-left:1rem;
}

/* nav buttons (inherits theme button colors) */
.but-check .but-nav{display:flex;justify-content:center;gap:10px}
.but-check .but-nav .wp-element-button{
  border-radius:999px;
  padding:.9rem 1.6rem;
  font-weight:700;
}

/* results */
.but-check .but-result[data-state="yes"]{
  color:var(--wp--preset--color--primary, var(--brand));
  font-weight:700;
  margin-bottom:8px;
}
.but-check .but-result[data-state="no"]{opacity:.9;margin-bottom:8px}
.but-check .but-summary{margin:.25rem 0 0 1rem}

/* mobile container padding */
@media (max-width:782px){.but-check{padding:14px}}
