.elementor-64243 .elementor-element.elementor-element-e882cfd{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:50px 50px;--row-gap:50px;--column-gap:50px;border-style:none;--border-style:none;box-shadow:0px 0px 10px 0px rgba(40.999999999999986, 77.00000000000006, 15.000000000000007, 0.38);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:3px;--padding-bottom:3px;--padding-left:0px;--padding-right:0px;}.elementor-64243 .elementor-element.elementor-element-e882cfd:not(.elementor-motion-effects-element-type-background), .elementor-64243 .elementor-element.elementor-element-e882cfd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-c1af54c );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-64243 .elementor-element.elementor-element-ff4ee6b{text-align:center;}.elementor-64243 .elementor-element.elementor-element-ff4ee6b img{width:60px;filter:brightness( 200% ) contrast( 200% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg );}.elementor-64243 .elementor-element.elementor-element-ab4b3d5{padding:30px 20px 30px 20px;}.elementor-bc-flex-widget .elementor-64243 .elementor-element.elementor-element-4011285a.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-64243 .elementor-element.elementor-element-4011285a.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-64243 .elementor-element.elementor-element-4011285a.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-64243 .elementor-element.elementor-element-4011285a > .elementor-element-populated{margin:20px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );color:var( --e-global-color-primary );}.elementor-64243 .elementor-element.elementor-element-169e1b7d{text-align:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-64243 .elementor-element.elementor-element-58ec2444{width:var( --container-widget-width, 55% );max-width:55%;--container-widget-width:55%;--container-widget-flex-grow:0;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-64243 .elementor-element.elementor-element-58ec2444 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-64243 .elementor-element.elementor-element-58ec2444.elementor-element{--align-self:center;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-field-type-html{padding-bottom:0px;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-button[type="submit"]{color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-64243 .elementor-element.elementor-element-58ec2444 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-64243 .elementor-element.elementor-element-1750d44{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}}@media(min-width:768px){.elementor-64243 .elementor-element.elementor-element-e882cfd{--content-width:1120px;}}@media(max-width:767px){.elementor-64243 .elementor-element.elementor-element-e882cfd{--content-width:100%;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 15px;--row-gap:10px;--column-gap:15px;--padding-top:-1px;--padding-bottom:3px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-64243 .elementor-element.elementor-element-ff4ee6b img{width:48px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-64243 .elementor-element.elementor-element-58ec2444{width:100%;max-width:100%;}}/* Start custom CSS *//* ==========================================================
   Skinbase Quiz – Optimized styling (scoped to .skinbase-quiz)
   ========================================================== */

.skinbase-quiz{
  --quiz-width: 560px;       /* option stack + navigation width */
  --ves-green: #2f3f2f;      /* button green */
  --ves-green-hover: #253325;
  --border: #e5e7eb;
}

/* ---------- Question label ---------- */
.skinbase-quiz .elementor-field-label{
  display: block;
  text-align: center;
  margin: 0 auto 20px !important;
  max-width: 800px;

  font-family: var(--e-global-typography-primary-font-family) !important;
  font-weight: var(--e-global-typography-primary-font-weight, 600) !important;
  letter-spacing: var(--e-global-typography-primary-letter-spacing, 0) !important;

  font-size: 22px;
  line-height: 1.3;
  color: #1f2937;
}

/* ---------- Radio option stack layout ---------- */
.skinbase-quiz .elementor-field-type-radio .elementor-field-subgroup{
  display: block !important;
  gap: 0 !important;
  max-width: var(--quiz-width);
  margin: 0 auto !important;
}

.skinbase-quiz .elementor-field-type-radio .elementor-field-option{
  display: block !important;
  width: 98% !important;                 /* ✅ keep true full width */
  margin: 0 0 12px 0 !important;
}

/* Hide the native radio input */
.skinbase-quiz .elementor-field-type-radio .elementor-field-option > input[type="radio"]{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Button look (label) */
.skinbase-quiz .elementor-field-type-radio .elementor-field-option > label{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 18px !important;

  border: 2px solid var(--border) !important;
  border-radius: 14px !important;
  background: #fff !important;

  cursor: pointer !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;

  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

/* Hover */
.skinbase-quiz .elementor-field-type-radio .elementor-field-option > label:hover{
  border-color: #516E51 !important;
  background: #f6f8f6 !important;
}

/* Selected */
.skinbase-quiz .elementor-field-type-radio .elementor-field-option > input[type="radio"]:checked + label{
  border-color: #516E51 !important;
  background: #516E51 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.08) !important;
}

/* ---------- Step buttons (Next / Back) ---------- */
.skinbase-quiz .e-form__buttons{
  text-align: center;
}

/* Make the button row match the same width as options */
.skinbase-quiz .e-form__buttons__wrapper{
  max-width: var(--quiz-width);
  margin: 0 auto !important;
}

/* Base button style */
.skinbase-quiz .e-form__buttons__wrapper__button-next,
.skinbase-quiz .e-form__buttons__wrapper__button-previous{
  width: 100% !important;
  background-color: var(--ves-green) !important;
  color: #fff !important;

  border: none !important;
  border-radius: 14px !important;
  padding: 14px 26px !important;

  font-family: var(--e-global-typography-text-font-family) !important;
  font-size: 16px !important;
  font-weight: 600 !important;

  transition: background .18s ease, transform .18s ease !important;
}

/* Hover */
.skinbase-quiz .e-form__buttons__wrapper__button-next:hover,
.skinbase-quiz .e-form__buttons__wrapper__button-previous:hover{
  background-color: var(--ves-green-hover) !important;
  transform: translateY(-1px);
}

/* Back button = outline */
.skinbase-quiz .e-form__buttons__wrapper__button-previous{
  background: transparent !important;
  color: var(--ves-green) !important;
  border: 2px solid var(--ves-green) !important;
}

/* If Back + Next sit on same row, give a little spacing */
.skinbase-quiz .elementor-field-type-previous{
  margin-bottom: 10px;
}

/* ---------- Result styling ---------- */
.skinbase-quiz #skinbase_result_v2.sbq-result{
  display: block;
  max-width: 720px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}

/* Image: smaller + 20px rounded corners */
.skinbase-quiz .sbq-result__media{
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.skinbase-quiz .sbq-result__media img{
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 20px;
  display: block;
}

/* Title */
.skinbase-quiz .sbq-result__title{
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--ves-green);
}

/* =====================================================
   Tips list – replace bullets with check-circle icon
===================================================== */

.skinbase-quiz .sbq-result__tips{
  text-align: left;
  max-width: 520px;
  margin: 0 auto 18px auto;

  list-style: none !important;   /* remove default bullets */
  padding-left: 0 !important;
}

.skinbase-quiz .sbq-result__tips li{
  position: relative;
  padding-left: 34px;            /* space for icon */
  margin-bottom: 12px;

  font-size: 15px;
  line-height: 1.55;
  color: #2f3f2f;
}

.skinbase-quiz .sbq-result__tips li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;

  width: 22px;
  height: 22px;

  background-image: url("https://vessi.no/wp-content/uploads/2025/11/check-circle.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Buy CTA – make sure it looks like a button */
.skinbase-quiz .sbq-result__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 28px;
  border-radius: 999px;

  background: var(--ves-green);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;

  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease;
}
.skinbase-quiz .sbq-result__cta:hover{
  background: var(--ves-green-hover);
  transform: translateY(-1px);
}

/* FORCE replace bullets with check icon (overrides inline list-style:disc) */
#skinbase_result_v2 .sbq-result__tips{
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Remove default bullet marker in all browsers */
#skinbase_result_v2 .sbq-result__tips li{
  list-style: none !important;
}
#skinbase_result_v2 .sbq-result__tips li::marker{
  content: "" !important;
}

/* Add check icon */
#skinbase_result_v2 .sbq-result__tips li{
  position: relative;
  padding-left: 34px !important;
  margin-bottom: 12px;
}

#skinbase_result_v2 .sbq-result__tips li::before{
  content: "" !important;
  position: absolute;
  left: 5px;
  top: 0.4em;

  width: 16px;
  height: 16px;

  background: url("https://vessi.no/wp-content/uploads/2025/11/check-circle.svg") no-repeat center / contain !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px){
  .skinbase-quiz{
    --quiz-width: 100%;
  }
  .skinbase-quiz .elementor-field-label{
    font-size: 20px;
  }
  .skinbase-quiz .sbq-result__media img{
    max-width: 260px;
  }
  .skinbase-quiz .sbq-result__cta{
    width: 100%;
    max-width: 320px;
    margin: 14px auto 0;
  }
}


/* =========================================================
   STEP 1 – SKIN TONE CHOICES
   Increased height for better image visibility
========================================================= */

/* Choice card */
#skinbase_shade_finder_v2 
.elementor-field-group-skin_tone 
.elementor-field-option > label{
  --imgW: 30%;

  position:relative;
  display:flex;
  align-items:center;

  /* ✅ HEIGHT CONTROL */
  min-height:130px;        /* desktop height */
  padding:28px 24px 28px calc(var(--imgW) + 24px);

  overflow:hidden;         /* clip image to rounded corners */
}

/* LEFT IMAGE PANEL */
#skinbase_shade_finder_v2 
.elementor-field-group-skin_tone 
.elementor-field-option > label::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:var(--imgW);
  height:100%;

  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;   /* crop, never stretch */

  transform:translateZ(0);
  pointer-events:none;
}

/* =========================================================
   IMAGE MAPPING
========================================================= */

#skinbase_shade_finder_v2 
.elementor-field-group-skin_tone 
input[type="radio"][value="Veldig lys"] + label::before{
  background-image:url("https://vessi.no/wp-content/uploads/2026/01/Shade20-NO-BG.webp") !important;
}

#skinbase_shade_finder_v2 
.elementor-field-group-skin_tone 
input[type="radio"][value="Lys"] + label::before{
  background-image:url("https://vessi.no/wp-content/uploads/2026/01/Shade25-NO-BGwebp.webp") !important;
}

#skinbase_shade_finder_v2 
.elementor-field-group-skin_tone 
input[type="radio"][value="Medium"] + label::before{
  background-image:url("https://vessi.no/wp-content/uploads/2026/01/Shade35-NO-BG.webp") !important;
}

#skinbase_shade_finder_v2 
.elementor-field-group-skin_tone 
input[type="radio"][value="Medium-mørk"] + label::before{
  background-image:url("https://vessi.no/wp-content/uploads/2026/01/Shade-40-NO-BG.webp") !important;
}

#skinbase_shade_finder_v2 
.elementor-field-group-skin_tone 
input[type="radio"][value="Mørk"] + label::before{
  background-image:url("https://vessi.no/wp-content/uploads/2026/01/Shade-85-NO-BG.webp") !important;
}

/* =========================================================
   STEP 2 – UNDERTONE CHOICES (tone-specific images via JS)
   Left image panel (35%) + cover (no stretch)
   Does NOT touch the question label
========================================================= */

#skinbase_shade_finder_v2 .elementor-field-group-undertone .elementor-field-subgroup{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

/* Hide native radios (choices only) */
#skinbase_shade_finder_v2 .elementor-field-group-undertone .elementor-field-option > input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Card */
#skinbase_shade_finder_v2 .elementor-field-group-undertone .elementor-field-option > label{
  --imgW: 35%;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  min-height: 120px;                 /* more image visibility */
  padding: 30px 24px 30px calc(var(--imgW) + 24px);
  border:2px solid #e6e7ea;
  border-radius:22px;
  background:#fff;
  cursor:pointer;
  transition:all .15s ease;
  font-weight:600;
  font-size:18px;
  color:#2f3f2f;
}

/* Left image panel injected by JS (per option) */
#skinbase_shade_finder_v2 .elementor-field-group-undertone .elementor-field-option > label::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:var(--imgW);
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;             /* crop instead of stretch */
  pointer-events:none;
  transform: translateZ(0);
}

/* Selected state */
#skinbase_shade_finder_v2 .elementor-field-group-undertone
.elementor-field-option > input[type="radio"]:checked + label{
  background:#2f3f2f;
  color:#fff;
  border-color:#2f3f2f;
}

/* ===== STEP 3 ONLY: add vertical space inside answer boxes ===== */
#skinbase_shade_finder_v2 
.elementor-field-group-skin_type 
.elementor-field-option > label{
  /* more breathing room */
  padding-top:32px !important;
  padding-bottom:32px !important;

  /* ensure enough height for injected text */
  min-height:96px;

  /* allow multi-line content */
  display:flex;
  align-items:center;
}

/* Optional: if you inject a small explainer inside the card */
#skinbase_shade_finder_v2 
.elementor-field-group-skin_type 
.elementor-field-option > label .sbq-inline-explainer{
  display:block;
  margin-top:6px;
  font-size:13px;
  line-height:1.4;
  opacity:0.85;
}

/* Mobile tweak */
@media (max-width: 640px){
  #skinbase_shade_finder_v2 .elementor-field-group-undertone .elementor-field-option > label{
    --imgW: 40%;
    min-height: 110px;
  }
}

/* =========================================================
   MOBILE TWEAK
========================================================= */

@media (max-width:640px){
  #skinbase_shade_finder_v2 
  .elementor-field-group-skin_tone 
  .elementor-field-option > label{
    --imgW:28%;
    min-height:100px;
    padding:22px 18px 22px calc(var(--imgW) + 18px);
  }
}

/* ===== MOBILE ONLY: scrollable step indicators with centered dividers ===== */
@media (max-width: 768px){

  /* indicator row */
  #skinbase_shade_finder_v2 .e-form__indicators{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important; /* ✅ KEY FIX */
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-behavior:smooth !important;

    max-width:100% !important;
    width:100% !important;

    gap:10px !important;
    padding:0 12px !important;

    justify-content:flex-start !important;
    box-sizing:border-box !important;
  }

  /* step circles */
  #skinbase_shade_finder_v2 .e-form__indicators__indicator{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
  }

  /* divider lines */
  #skinbase_shade_finder_v2 .e-form__indicators__indicator__separator{
    flex:0 0 29px !important;
    height:1px !important;              /* slightly thicker looks better */
    background-color:currentColor;      /* matches theme color */
    opacity:0.4 !important;

    display:block !important;
    align-self:center !important;        /* secondary safety */
    margin:0 !important;
  }

  /* hide scrollbar */
  #skinbase_shade_finder_v2 .e-form__indicators::-webkit-scrollbar{
    display:none;
  }
  #skinbase_shade_finder_v2 .e-form__indicators{
    scrollbar-width:none;
  }
}/* End custom CSS */