/* ===== Smileie Assessment (scoped) ===== */
  #smileie-assessment.sa-root{
    --sa-bg: #BEDEF5;
    --sa-surface:#ffffff;
    --sa-text:#0b141b;
    --sa-sub:#3b4349;
    --sa-primary:#029BFF;        /* main blue */
    --sa-primary-2:#002ba9;       /* darker blue */
    --sa-ring:rgba(10,67,255,.35);
    --sa-success:#1db954;
    --sa-danger:#d93c3c;

    font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
    color: var(--sa-text);
  }
  #smileie-assessment .sa-card{
    background: var(--sa-bg);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 12px;
  }
  #smileie-assessment .sa-panel{
    padding: 0px 0 32px;
  }
  /* Steps */
  #smileie-assessment .sa-progress{padding:20px;}
  #smileie-assessment .sa-steps{
    --size: 30px;
    display: flex;
    /* grid-template-columns: repeat(7,1fr);
    align-items: center; */
    gap: 80px;
    justify-content: center;
    /* counter-reset: step;
    position: relative;
    padding: 0 225px; */
    margin-bottom: 45px;
    margin-top: 100px;
    padding: 0;
    
  }


  #smileie-assessment .sa-step {
  position: relative;
}

#smileie-assessment .sa-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  width: 70px;              /* length between steps — adjust as needed */
  height: 4px;
  background: #e8eef5;      /* default grey */
  transform: translateY(-50%);
  border-radius: 2px;
  z-index: 0;
}

/* Connector color for completed steps */
/* #smileie-assessment .sa-step.is-done::after {
  background: var(--sa-primary);
} */

/* Connector color for the one right after active step */
#smileie-assessment .sa-step.is-active::after {
  background: var(--sa-primary);
}


  #smileie-assessment .sa-step{
    display:flex; justify-content:center; position:relative; z-index:1;
  }
  #smileie-assessment .sa-step > span{
    display:inline-grid; place-items:center; width:var(--size); height:var(--size);
    background:#fff; border: 3px solid #e8eef5; color:#818b98; border-radius:50%; font-weight:600;
  }
  /* #smileie-assessment .sa-step.is-active > span,
  #smileie-assessment .sa-step.is-done > span{
    border-color: var(--sa-primary);
    color:#fff; background: var(--sa-primary);
  } */

  #smileie-assessment .sa-step > span{
  display:inline-grid; place-items:center;
  width:var(--size); height:var(--size);
  background:#fff; border: 3px solid #e8eef5; color:#818b98;
  border-radius:50%; font-weight:600;
}

/* Active step only: blue filled */
#smileie-assessment .sa-step.is-active > span{
  border-color: var(--sa-primary);
  background: var(--sa-primary);
  color: #fff;
}

/* Completed steps stay gray (override any old styles) */
#smileie-assessment .sa-step.is-done > span{
  border-color:#e8eef5;
  background:#fff;
  color:#818b98;
}

  /* Screens */
  #smileie-assessment .sa-screen{display:none;}
  #smileie-assessment .sa-screen.is-active{display:block;}
  #smileie-assessment .sa-title{text-align:center; max-width: 690px;
    margin: 0 auto;
    margin-bottom: 20px;}
  #smileie-assessment .sa-sub{color:var(--sa-sub); text-align:center; margin:0 0 22px;}
  #smileie-assessment .sa-hero-icon{font-size:40px; text-align:center; margin: 8px 0 10px;}

  /* Options */
/* --- Image cards with visible radio circle --- */
.sa-options { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }

.sa-option{
  position:relative;
  background:#fff;
  border:2px solid #e5eaf0;
  border-radius:12px;
  padding:18px 22px;
  max-width:170px;    /* tweak to your liking */
  max-height:67px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, box-shadow .2s, transform .03s;
  width: 100%;
}
.sa-option:hover{ border-color:#cfd8e2; }
.sa-option:active{ transform:translateY(1px); }

/* the image itself */
.sa-option-img{ display:block;height: 45px;width: 96px; pointer-events:none;}

/* radio input stays hidden */
.sa-option input{ position:absolute; inset:0; opacity:0; }

/* the visible round indicator (unchecked) */
.sa-option::before{
  content:"";
  position:absolute; left:14px; 
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:2px solid #cfd8e3;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* when selected (via :has support OR fallback class set by JS) */
.sa-option:has(input:checked),
.sa-option.is-checked{
  border-color:#71b6ff;
  box-shadow:0 0 0 4px rgba(2,155,255,.25);
}
.sa-option:has(input:checked)::before,
.sa-option.is-checked::before{
  border-color:#029BFF;
}
.sa-option:has(input:checked)::after,
.sa-option.is-checked::after{
  content:"";
  position:absolute; left:20px; 
  width:10px; height:10px; border-radius:50%;
  background:#029BFF;
}

/* --- Buttons exactly like screenshot --- */
.sa-actions{ display:flex; justify-content:center; gap:18px;}

.sa-btn{
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  height:44px; padding:0 22px;
  border-radius:999px; font-weight:700; cursor:pointer;
  border:1.5px solid #d7dde6; background:#fff; color:#0b141b;
}

/* Back (outline) */
.sa-actions .sa-btn[data-prev]{
  border-color:#1B66D6; color:#1B66D6; background:transparent;
}
.sa-actions .sa-btn[data-prev]:hover{
  background:rgba(27,102,214,.06);
}

/* Next / primary (solid blue) */
.sa-btn-primary{
  border:0; color:#fff;
  background:#002BA9;
}

/* inline arrow icon (your hosted SVG) */
.sa-btn .btn-icon{
   display:inline-block; flex:0 0 16px;
}
#smileie-assessment [data-step="5"] .sa-options{
  display:flex; flex-wrap:wrap; gap:16px 22px; justify-content:center;
}

#smileie-assessment [data-step="5"] .sa-option{
  position:relative;
  display:flex; align-items:center;
  background:#fff;
  border:2px solid #E5EAF0;
  border-radius:12px;
  padding:14px 9px 14px 52px;   /* left space for the circle */
  min-height:52px;
  min-width:300px;               /* controls 3-up / 2-down wrapping */
  transition:border-color .2s, box-shadow .2s, transform .03s;
  justify-content: flex-start;
}
#smileie-assessment [data-step="5"] .sa-option:hover{ border-color:#CFD8E2; }
#smileie-assessment [data-step="5"] .sa-option:active{ transform:translateY(1px); }

/* hide native checkbox but keep the whole chip clickable */
#smileie-assessment [data-step="5"] .sa-option > input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

/* label text */
#smileie-assessment [data-step="5"] .sa-option > span{
  font-weight:600; color:#1a1f36;
  pointer-events:none;
}

/* radio-style circle (unchecked) */
#smileie-assessment [data-step="5"] .sa-option::before{
  content:"";
  position:absolute; left:18px; top:50%;
  width:22px; height:22px; margin-top:-11px;
  border-radius:50%;
  background:#fff;
  border:2px solid #CFE1F6;
}

/* inner dot (checked) */
#smileie-assessment [data-step="5"] .sa-option::after{
  content:"";
  position:absolute; left:24px; top:51%;
  width:10px; height:10px; margin-top:-5px;
  border-radius:50%;
  background:transparent;
  transition:background .2s;
}

/* checked state (via :has) */
#smileie-assessment [data-step="5"] .sa-option:has(input:checked){
  border-color:#71B6FF;
  box-shadow:0 0 0 3px rgba(2,155,255,.25);
}
#smileie-assessment [data-step="5"] .sa-option:has(input:checked)::before{ border-color:#029BFF; }
#smileie-assessment [data-step="5"] .sa-option:has(input:checked)::after{ background:#029BFF; }

/* fallback class if :has isn't available */
#smileie-assessment [data-step="5"] .sa-option.is-checked{
  border-color:#71B6FF; box-shadow:0 0 0 3px rgba(2,155,255,.25);
}
#smileie-assessment [data-step="5"] .sa-option.is-checked::before{ border-color:#029BFF; }
#smileie-assessment [data-step="5"] .sa-option.is-checked::after{ background:#029BFF; }

/* Step 3: stack options vertically */
#smileie-assessment [data-step="3"] .sa-options,
#smileie-assessment [data-step="6"] .sa-options {
  flex-direction: column;         /* one below the other */
  align-items: center;            /* center the cards */
  gap: 16px;
}

/* Make each label a nice full-width card */
#smileie-assessment [data-step="3"] .sa-option,
#smileie-assessment [data-step="6"] .sa-option {
  width: 100%;
  max-width: 300px;               /* tweak width if desired */
  min-height: 52px;
  padding: 14px 18px 14px 56px;   /* space for the circle */
  justify-content: flex-start;
}

/* Keep the radio circle visually centered at all times */
#smileie-assessment [data-step="3"] .sa-option::before,
#smileie-assessment [data-step="3"] .sa-option::after,
#smileie-assessment [data-step="6"] .sa-option::before,
#smileie-assessment [data-step="6"] .sa-option::after {
  top: 50%;
  left: 28px;
  transform: translate(-50%, -50%);
}

/* Outer ring */


/* Inner dot (off by default, filled when checked) */
#smileie-assessment [data-step="3"] .sa-option::after,
#smileie-assessment [data-step="6"] .sa-option::after {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
}

#smileie-assessment [data-step="3"] .sa-option:has(input:checked)::after,
#smileie-assessment [data-step="6"] .sa-option:has(input:checked)::after {
  background: #029BFF;
}

#smileie-assessment [data-step="7"] .sa-sub{
  color: var(--sa-sub); text-align: center;
  max-width: 680px; margin: 0 auto 24px;
}

/* Form container */
#smileie-assessment [data-step="7"] .sa-grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* two columns for first/last name */
  gap: 14px 16px;
  max-width: 720px;
  margin: 0 auto 24px;
}

/* First/Last stay split; others span full width */
#smileie-assessment [data-step="7"] .sa-field:nth-child(1),
#smileie-assessment [data-step="7"] .sa-field:nth-child(2){ grid-column: auto; }
#smileie-assessment [data-step="7"] .sa-field:nth-child(3),
#smileie-assessment [data-step="7"] .sa-field:nth-child(4),
#smileie-assessment [data-step="7"] .sa-consent{ grid-column: 1 / -1; }

/* Inputs: pill style + focus ring */
#smileie-assessment [data-step="7"] input,
#smileie-assessment [data-step="7"] select{
  width: 100%; height: 56px;
  border-radius: 14px;
  border: 1.5px solid #E0E7EF;
  background: #fff;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
#smileie-assessment [data-step="7"] input:focus,
#smileie-assessment [data-step="7"] select:focus{
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 4px rgba(2,155,255,.18);
}

/* Phone row: dropdown + input */
#smileie-assessment [data-step="7"] .sa-phone{
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
}
#smileie-assessment [data-step="7"] .sa-phone select{
  appearance: none; background-image: none; /* keep it clean */
}

/* Hide visible labels but keep for accessibility */


/* Consent line */
#smileie-assessment [data-step="7"] .sa-consent{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.45;
}
#smileie-assessment [data-step="7"] .sa-consent input[type="checkbox"]{
  width: 18px; height: 18px; margin-top: 3px;
}

/* Inline errors */
#smileie-assessment [data-step="7"] .sa-error{
  display: block; color: #d93c3c; font-size: 13px; margin-top: 6px;
}

/* Buttons: centered like the mock */
#smileie-assessment [data-step="7"] .sa-actions{
  justify-content: center; gap: 16px; margin-top: 8px;
}

#smileie-assessment [data-step="7"] .sa-field:not(.sa-consent) > label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,1px,1px);
  white-space: nowrap;
  border: 0;
}


/* Responsive */
@media (max-width: 640px){
  #smileie-assessment [data-step="7"] .sa-grid{ grid-template-columns: 1fr; }
  #smileie-assessment [data-step="7"] .sa-phone{ grid-template-columns: 1fr; }

  #smileie-assessment .sa-steps{
    --size: 22px;                 /* circle size */
    gap: 30px;                    /* space between circles */
    margin-top: 90px;
    margin-bottom: 24px;
    padding: 0 16px;              /* comfy side padding */
    display: flex;
    justify-content: center;      /* keep centered */
  }

  #smileie-assessment .sa-step > span{
    width: var(--size);
    height: var(--size);
    font-size: 12px;
    border-width: 2px;
  }

  /* Shorter connector between steps */
  #smileie-assessment .sa-step:not(:last-child)::after{
    width: 23px;                  /* connector length */
    height: 3px;                  /* connector thickness */
    border-radius: 2px;
    left: calc(100% + 3px);
  }
}

#smileie-assessment .teeth_description{
  display:flex;
  justify-content:center;
  gap:24px;                 /* space between cards */
  margin:20px 10px 0px;
  flex-wrap:wrap;
}
#smileie-assessment .teeth_description .sa-option{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:170px;              /* Figma: Fixed(170px) */
  height:68px;              /* Figma: ~68px */
  padding:11px 20px 11px 56px; /* Figma: 11/20/11/20 + extra left for circle */
  background:#fff;
  border:2px solid #E5EAF0; /* light grey */
  border-radius:16px;       /* Figma: 16px */
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:border-color .2s, box-shadow .2s, transform .03s;
  cursor:pointer;
}


.action-button,
.action-button-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* space between text and icon */
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 16px;
  border-radius: 40px;
  padding: 14px 30px;
  height: 49px;
  width: 152px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

/* NEXT button (filled) */
.action-button {
  background-color: #002BA9; /* Dark Blue */
  color: #fff;
  border: none;
}

.action-button:hover {
  background-color: #029BFF;
}

/* BACK button (outlined) */
.action-button-previous {
  background: transparent;
  border: 1px solid #002BA9;
  color: #002BA9;
}

.action-button-previous:hover {
  background:#029BFF;
  color: #fff;
}

#smileie-assessment .age_18_plus{
  display:flex;
  justify-content:center;
  flex-direction: column;
  gap:14px;                 /* space between cards */
    margin: 20px 0 0px;
    flex-wrap: wrap;
    align-items: center;
}

#smileie-assessment [data-type]{ flex-wrap: wrap; }
#smileie-assessment [data-type] .req_msg{
  flex: 0 0 100%; order: 99; margin-top: 8px;
  color:#d93c3c; font-size:13px; text-align:center;
}

#smileie-assessment .severity{
  display:flex;
  justify-content:center;
  gap:24px;                 /* space between cards */
  margin:20px 10px 0px;
  flex-wrap:wrap;
}

#smileie-assessment .severity .sa-option{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:200px;              /* Figma: Fixed(170px) */
  height:64px;              /* Figma: ~68px */
  padding:11px 20px 11px 56px; /* Figma: 11/20/11/20 + extra left for circle */
  background:#fff;
  border:2px solid #E5EAF0; /* light grey */
  border-radius:16px;       /* Figma: 16px */
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:border-color .2s, box-shadow .2s, transform .03s;
  cursor:pointer;
  font-weight: 500;
}

.sa-option{
    font-weight: 500;
}

#smileie-assessment .worn{
  display:flex;
  justify-content:center;
  flex-direction: column;
  gap:14px;                 /* space between cards */
    margin: 20px 0 0px;
    flex-wrap: wrap;
    align-items: center;
}

#smileie-assessment [data-step="5"] .conditions{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:16px 22px;    max-width: 66%;
    margin: 0 auto;
}

/* chip */
#smileie-assessment [data-step="5"] .conditions .sa-option{
     /* space for the circle */
  min-height:68px;
  min-width:270px;                   /* 2–3 per row on desktop */
}
.sa-option:hover{
  border-color:#71B6FF;
}

/* hide native checkbox but make whole chip clickable */
#smileie-assessment [data-step="5"] .conditions .sa-option > input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
#smileie-assessment [data-step="5"] .conditions .sa-option > span{
  font-weight:600; color:#1A1F36; pointer-events:none;
}



/* selected state (modern browsers via :has) */
#smileie-assessment [data-step="5"] .conditions .sa-option:has(input:checked){
  border-color:#71B6FF; box-shadow:0 0 0 3px rgba(2,155,255,.25);
}
#smileie-assessment [data-step="5"] .conditions .sa-option:has(input:checked)::before{ border-color:#029BFF; }
#smileie-assessment [data-step="5"] .conditions .sa-option:has(input:checked)::after{ background:#029BFF; }

/* fallback for browsers without :has — JS toggles .is-checked */
#smileie-assessment [data-step="5"] .conditions .sa-option.is-checked{
  border-color:#71B6FF; box-shadow:0 0 0 3px rgba(2,155,255,.25);
}
#smileie-assessment [data-step="5"] .conditions .sa-option.is-checked::before{ border-color:#029BFF; }
#smileie-assessment [data-step="5"] .conditions .sa-option.is-checked::after{ background:#029BFF; }

/* error line sits UNDER the chips *

/* responsive */
@media (max-width: 720px){
  #smileie-assessment [data-step="5"] .conditions .sa-option{ min-width:100%; }
}

#smileie-assessment [data-step="3"] .age_18_plus .sa-option:has(input:checked){
  border-color:#71B6FF; box-shadow:0 0 0 3px rgba(2,155,255,.25);
}
#smileie-assessment [data-step="6"] .worn .sa-option:has(input:checked){
  border-color:#71B6FF; box-shadow:0 0 0 3px rgba(2,155,255,.25);
}