/* ==========
  SCOPE IT
  Change this selector to something unique around your embed.
  In your snippet you have: [data-form-modal-cd-container]
========== */


/* ==========
  Desktop expert card animation
  - Uses a JS-added .is-active class on the block root.
  - Animates transform only (keeps the existing tablet top/left positioning in Twig).
========== */

@media (min-width: 768px) {
  [data-form-modal-root] [data-form-modal-expert-card] {
    transition:
      transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 120ms;
    transform: translateX(72px);
    opacity: 0;
    will-change: transform;
  }

  [data-form-modal-root].is-active [data-form-modal-expert-card] {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-form-modal-root] [data-form-modal-expert-card] {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* Kill SurveyJS default max-width/full bleed wrappers */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-root-modern--full-container,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-root-modern__wrapper,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-container-modern{
  width: min(760px, 100%);
  margin: 0 auto;
}

/* Card background like screenshot */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-container-modern{
  box-sizing: border-box;
  padding: 28px;
  border-radius: 18px;
  background: transparent;
}

.sd-body {
  padding: 0;
}

/* Stack rows vertically; each row manages its own internal layout */
.sd-body.sd-body--responsive .sd-page {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}

/* Single-question rows: full width */
.sd-row.sd-page__row {
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 12px;
  overflow: visible !important;
}

.sd-row.sd-page__row:last-child {
  margin-bottom: 0;
}

.sd-row--multiple > div{
  padding-left: 0px !important;
  overflow: visible !important;
}

/* Multi-question rows (sd-row--multiple): equal columns matching child count */
.sd-row.sd-page__row.sd-row--multiple {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 24px;
  padding-left: 16px;
  overflow: visible !important;
}

@media (max-width: 768px) {
  .sd-row.sd-page__row.sd-row--multiple {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* Visually hide fields whose data-key contains "hidden" (e.g. "Training device hidden0") */
[data-key*="hidden"] {
  display: none !important;
}

.sd-element--with-frame {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.sd-element--complex.sd-element--with-frame {
  padding: 0 !important;
  overflow: visible !important;
}

/* Prevent any SurveyJS question wrapper from clipping the focus ring */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-question,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-question__content {
  overflow: visible !important;
}

/* Breathing room so the focus ring box-shadow is never clipped */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-element__content,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-text__content {
  padding: 2px !important;
}

:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sv-tagbox__item {
  padding: 2px 8px !important;
  max-width: 100px !important;
}

.sd-root-modern {
  background: transparent !important;
}

.sd-body.sd-body--responsive {
  padding: 0 !important;
}

.sd-root-modern--mobile .sd-body.sd-body--responsive, .sd-root-modern--mobile .sd-body.sd-body--static {
  padding: 0 !important;
}

.sd-container-modern {
  padding: 0 !important;
}

/* Remove extra frames/padding SurveyJS adds */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-body,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-page,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-page__row,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-row{
  background: transparent;
}

/* Make each row not fight with widths */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-page__row{
  margin: 0 0 12px;
}

/* Label/title styling */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-question__title{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-question__title--required .sd-question__required-text{
  color: #e44b3a;
  font-weight: 700;
}

/* Inputs: your blue outline + rounded */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-input.sd-text,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-input.sd-dropdown,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-input.sd-input--readonly,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) select,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) textarea{
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 10px 16px;
  border: 1px solid #C0D6E6 !important;
  border-radius: 8px !important;
  outline: none;
  background: #fff !important;
  font-size: 14px;
}

/*
  SurveyJS dropdown popup (ClickDimensions New Form Editor)
  SurveyJS appends .sv-popup to document.body — these rules are global.
*/
.sv-popup .sv-popup__scrolling-content {
  overflow-y: auto !important;
  max-height: min(260px, 40vh) !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.sv-popup .sv-list__item-body {
  font-size: var(--type-body-xsmall-size, 12px) !important;
  line-height: 1.4 !important;
  padding: 6px 12px !important;
}

.sv-popup .sv-list__item--selected .sv-list__item-body {
  color: #fff !important;
}

.sd-element__title span {
  font-size: 12px !important;
}

.sd-editor-button-item {
  padding: 0 !important;
}

/* Focus ring — use box-shadow instead of a thicker border so the ring
   never gets clipped by parent overflow and doesn't shift layout. */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-input.sd-text:focus,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-dropdown__filter-string-input:focus,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) select:focus,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) textarea:focus{
  border-color: #A0C7E3 !important;
  box-shadow: 0 0 0 1px #A0C7E3 !important;
}

/* Textarea */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) textarea,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-comment{
  min-height: 92px;
  resize: vertical;
  font-size: 14px;
}

.sd-dropdown__value {
  position: relative !important;
  min-height: auto !important;
  font-size: 12px !important;
  margin-block: 0 !important;
  margin-inline: 0 !important;
}

/* Dropdown internal input (SurveyJS) */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-dropdown__value input{
  min-height: auto !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

.sv-dropdown_select-wrapper use {
  fill: #1C1C1C !important;
}

/* Checkbox look closer to screenshot (simple) */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-checkbox{
  margin: 0;
  padding: 0px;
}

.sd-item__control-label .sv-string-viewer {
  color: var(--color-gray-500);
  font-size: 12px;
}

[data-key="Checkbox 10"] .sd-selectbase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  [data-key="Checkbox 10"] .sd-selectbase {
    grid-template-columns: repeat(2, 1fr);
  }
}

:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-selectbase__label{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sd-item--checked .sd-item__decorator {
  background-color: #88B5D6 !important;
}

:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-item__decorator{
  border: solid 1px #88B5D6;
  border-radius: 4px;
}

:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-item__control-label{
  font-size: 14px;
}

.sd-body.sd-body--responsive .sd-body__navigation {
  padding-top: 10px !important;
}

:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-footer,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-body__navigation {
  display: flex !important;
  flex-direction: column-reverse !important;
}

/* CTA button like screenshot (pill) */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-navigation__complete-btn,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-btn--action{
  position: relative;
  width: auto;
  height: auto;
  cursor: pointer;
  color: #1B1B1B !important;
  border: none !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none;
  font-size: 16px !important;
  font-weight: 400 !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-navigation__complete-btn:hover,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-btn--action:hover {
  background: linear-gradient(140.7deg, rgb(var(--primitive-blue-3) / 1) 0%, rgb(var(--primitive-blue-0) / 1) 100%) !important;
  color: #1B1B1B !important;
}

/* Rows that contain only hidden fields: collapse the row so it leaves no blank space */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-row.sd-page__row:has([data-key*="hidden"]) {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.sd-editor-chevron-button {
  background-image: none !important;
}

.sv-action:has(.sv-action__content input) {
  padding: 10px;
}

.sv-action .sv-action__content:has(input) {
  position: relative;
  z-index: 1;
}

.sv-action .sv-action__content:has(input)::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  content: '';
  transform: translate(-50%, -50%);
  border-radius: 100px;
  background-image: var(--gradient-border-button-primary) !important;
}

.sd-root-modern--mobile .sd-body__navigation .sd-btn {
  background: #88B5D6 !important;
}

.sd-root-modern--mobile .sd-body__navigation .sd-btn:hover {
  background: #fff !important;
  transition: 0.3s all ease-in-out;
}

.sd-element__title .sv-string-viewer.sv-string-viewer--multiline {
    white-space: pre-wrap;
    color: #747474;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}

.sd-title.sd-element__title{
  margin: 0;
}

.sd-question__header--location-top {
  padding-bottom: 7px !important;
}

/* Center footer like screenshot */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-footer,
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .sd-body__navigation{
  display: flex;
  flex-direction: column;
  padding-top: 8px;
  gap: 14px;
  align-items: flex-start;
}

/* ==========
  TWO-COLUMN FIX (still using original DOM, we add ONE wrapper class)
  JS will create a wrapper DIV with class .cd-two-col and move the existing .sd-page__row nodes into it.
========== */
:is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .cd-two-col{
  margin: 0 0 14px;
}
@media (min-width: 640px){
  :is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .cd-two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* ensure the moved rows don’t add extra bottom margin */
  :is([data-form-modal-cd-container],[data-newsletter-cd-container],[data-cd-form-container],[data-closer-cta-cd-container]) .cd-two-col > .sd-page__row{
    margin: 0;
  }
}

.sd-element--with-frame > .sd-element__erbox {
  position: relative !important;
  left: 0 !important;
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.sd-element--with-frame.sd-question--title-top > .sd-question__erbox--above-question {
  margin-bottom: 0;
}

.sd-error {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  color: #e60a3e !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* =====================================
  Footer newsletter (ClickDimensions)
  - Footer keeps its own shell styles; this makes the injected CD form behave like the original input.
===================================== */

[data-footer-newsletter] [data-footer-newsletter-cd-container] {
  width: 100%;
  min-width: 0;
}

[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-root-modern--full-container,
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-root-modern__wrapper,
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-container-modern {
  width: 100% !important;
  margin: 0 !important;
}

[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-container-modern {
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Remove extra spacing so the input sits flush in the footer shell */
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-body.sd-body--responsive .sd-page {
  gap: 0 !important;
}

[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-row.sd-page__row,
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-element--with-frame {
  margin: 0 !important;
}

/* Keep labels accessible but not visible in the tight footer layout */
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-question__title,
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-item__control-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Make the CD-generated input look like the original footer input */
[data-footer-newsletter] [data-footer-newsletter-cd-container] input,
[data-footer-newsletter] [data-footer-newsletter-cd-container] textarea,
[data-footer-newsletter] [data-footer-newsletter-cd-container] select {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgb(var(--primitive-neutral-3)) !important;
  font: inherit !important;
  line-height: inherit !important;
}

[data-footer-newsletter] [data-footer-newsletter-cd-container] input::placeholder,
[data-footer-newsletter] [data-footer-newsletter-cd-container] textarea::placeholder {
  color: rgb(var(--primitive-neutral-3)) !important;
  opacity: 1 !important;
}

/* Hide CD's submit UI in footer; we keep the theme's existing button instead */
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-body__navigation,
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-footer {
  display: none !important;
}

[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-navigation__complete-btn,
[data-footer-newsletter] [data-footer-newsletter-cd-container] .sd-btn--action,
[data-footer-newsletter] [data-footer-newsletter-cd-container] button[type="submit"],
[data-footer-newsletter] [data-footer-newsletter-cd-container] input[type="submit"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.footerform-container{
    background: #f2f2f2 !important;
    border-radius: 12px !important;
}

.newsletterform-container{
    background: color-mix(in oklab, var(--color-white) 80%, transparent) !important;
    border-radius: 12px !important;
}

/*
  Footer newsletter: SurveyJS "sv-components-*" layout (ClickDimensions New Form Editor)
 =========================================================================================
*/

  .alignBottom .maxSize1 {
    font-family: sans-serif !important;
    font-weight: normal!important;
    font-size: 14px!important;
    color: #747474!important;
    position: absolute!important;
    display: block!important;
    bottom: 15px!important;
    display: none !important;
  }

  .responsiveRow:has(.captcha) {
    position: absolute !important;
  }

  .responsiveCell.responsiveCellSize1{
    width: calc(100% - 100px) !important;
    position: static !important;
  }

  .emptyCell { display: none !important; }

  .clear { display: none !important; }

  .clickdform.mainDiv {
    padding: 0 !important;
    width: 100%!important;
  }

  #clickdimensionsForm {
    width: 100%!important;
    position: relative!important;
  }

  .responsiveRow:first-of-type {
    display: flex !important;
    align-items: center !important;
    padding: 12px !important;
    width: 100% !important;
  }

  .EmailComponent {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-family: sans-serif !important;
    font-size: 15px !important;
    color: #747474 !important;
    width: 100% !important;
    display: unset !important;
    max-width: unset !important;
  }

  .EmailComponent::placeholder {
    color: #747474!important;
  }

  .clickdform .requiredInfo { 
    color: red !important;
    font-family: sans-serif !important;
    position: absolute !important;
    font-size: 11px !important;
    top: -18px !important;
    left: 0px !important;
   }

  .buttonContainer {
    pointer-events: all !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: min-content !important;
    display: flex !important;
    align-content: center !important;
    align-items: center !important;
    min-height: 24px !important;
    height: 24px !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  #btnSubmit {
    color: #000 !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: sans-serif !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: 1 !important;
    padding-right: 32px !important;
    padding-left: 12px !important;
    transition: color 280ms ease !important;
    background-color: unset;
  }

  .buttonContainer:hover #btnSubmit,
  .buttonContainer:focus-within #btnSubmit {
    color: #fff !important;
  }

  .buttonContainer::after {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    content: "›" !important;
    font-size: 24px !important;
    padding-bottom: 4px !important;
    padding-left: 0px !important;
    background: #000 !important;
    color: #fff !important;
    border-radius: 999px !important;
    width: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition:
      width 280ms cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .buttonContainer:hover::after,
  .buttonContainer:focus-within::after {
    width: 88% !important;
    justify-content: flex-end !important;
    padding-right: 8px !important;
  }

  .clickdform .maxSize1{
    display: unset !important;
    max-width: unset !important;
  }

  .clickdform .responsiveCell div.alignBottom{
    display: none !important;
  }

  .clickdform .responsiveCell div.alignTop{
    display: inline !important;
  }

  .buttonContainer {
    margin-right: 0px !important;
}

body[data-wsc-instance="true"] {
 position: relative !important;
}

body[data-wsc-instance="true"] div {
  position: absolute!important;
  top: 15px!important;
  left: 5px!important;
  font-size: 16px !important;
  color: #2C464C !important;
}


.sd-element--complex.sd-element--with-frame {
        --sd-base-vertical-padding: 0px !important;
        padding-top: 0 !important;
}