/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.ModalDialog-module_xapp_search_modal__WpGiJ {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px;
  z-index: 15000;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .ModalDialog-module_xapp_search_modal__WpGiJ {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) max(env(safe-area-inset-bottom), var(--xapp-keyboard-inset, 0px)) env(safe-area-inset-left);
  }
}
@media (max-height: 640px) and (min-width: 641px) and (pointer: fine) {
  .ModalDialog-module_xapp_search_modal__WpGiJ {
    padding-bottom: 24px;
  }
}
.ModalDialog-module_xapp_search_modal__backdrop__rryOU {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.4);
}
.ModalDialog-module_xapp_search_modal__body__qK17C {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .ModalDialog-module_xapp_search_modal__body__qK17C {
    width: 100%;
    height: 100%;
  }
}

.ModalDialog-module_xapp_search_modal_embedded__Ye0Dg {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}
.SearchResponseBubble-module_xapp_search_response_bubble__UtmuK {
  --xapp-bubble-background: #fff;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.Card-module_xapp_search_card__9iVCv {
  border: solid 0 var(--xapp-form-widget-border-color, #d3d3df);
  border-radius: 12px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-items: stretch;
  overflow: hidden;
  border-radius: var(--xapp-form-widget-border-radius-lg, 16px);
  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
  transition: box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
  background-color: #fff;
}
.Card-module_xapp_search_card__9iVCv:hover {
  box-shadow: var(--xapp-form-widget-box-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
}
.Card-module_xapp_search_card__featured__CX-L0 {
  flex: 1 1 240px;
  margin: 12px;
  width: 100%;
  min-width: 240px;
  overflow: hidden;
}
.Card-module_xapp_search_card__featured_box__1fV9y {
  position: relative;
  padding-bottom: math-div(100%, math-div(16, 9));
  box-sizing: border-box;
  overflow: hidden;
}
.Card-module_xapp_search_card__img__KJ1s3 {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}
.Card-module_xapp_search_card__content__dathl {
  flex: 4 1 200px;
  min-width: 200px;
  margin: 12px;
  display: flex;
  flex-direction: column;
}
.Card-module_xapp_search_card__extra__R-h6g {
  margin-top: auto;
  margin-left: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-items: stretch;
  max-width: 100%;
}
.Card-module_xapp_search_card__extra__R-h6g:before {
  content: "";
  min-width: 360px;
}
.Card-module_xapp_search_card__link__DNSSb {
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5em;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  font-weight: normal;
  font-size: 16px;
  font-style: normal;
  color: #006621;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
.Card-module_xapp_search_card__btn__DHrQp {
  flex: 1 1 auto;
  margin-top: 12px;
}
.Card-module_xapp_search_card__title__ddR3K {
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25em;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  font-weight: normal;
  font-size: 20px;
  font-style: normal;
  color: #1a0dab;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
.Card-module_xapp_search_card__title__ddR3K:hover {
  text-decoration: underline;
}
.Card-module_xapp_search_card__description__MruSU {
  line-height: 1.25em;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  font-weight: normal;
  font-size: 16px;
  font-style: normal;
  color: #666;
  margin-top: 6px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  overflow: hidden;
  max-height: 6.25em;
  position: relative;
}
.Card-module_xapp_search_card__description__MruSU:after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 12.5%, white 100%);
  content: "";
  height: 1.25em;
  position: absolute;
  top: 5em;
  left: 0;
  right: 0;
  pointer-events: none;
}
.Carousel-module_xapp_search_carousel__NZTGa {
  display: flex;
  flex-flow: row nowrap;
}
.Carousel-module_xapp_search_carousel__prev__BdNo-, .Carousel-module_xapp_search_carousel__next__udR98 {
  flex: 0 0 32px;
  height: 32px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 4px;
  align-self: center;
}
.Carousel-module_xapp_search_carousel__items__gRPzO {
  display: flex;
  position: relative;
  height: auto;
  align-items: stretch;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  -moz-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: hidden;
  /* smartphones, touchscreens */
}
@media (hover: none) and (pointer: coarse) {
  .Carousel-module_xapp_search_carousel__items__gRPzO {
    overflow-x: auto;
  }
}
.Carousel-module_xapp_search_carousel__content__EoqyB {
  flex-grow: 1;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.CarouselItem-module_xapp_search_carousel_item__xNpwo {
  display: inline-flex;
  flex-direction: column;
  padding-right: 12px;
  flex-shrink: 0;
  width: 275px;
}
.CarouselItem-module_xapp_search_carousel_item__xNpwo:last-child {
  padding-right: 0;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .CarouselItem-module_xapp_search_carousel_item__xNpwo {
    min-width: 100%;
    max-width: 100%;
  }
}
.Cards-module_xapp_search_cards__aeR3S {
  display: flex;
  flex-direction: column;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.FormFieldSelect-module_xapp_checkbox_select__QccWu {
  margin: 6px !important;
  font-size: var(--xapp-form-widget-checkbox-font-size, 14px) !important;
  font-family: var(--xapp-form-widget-checkbox-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
  color: var(--xapp-form-widget-checkbox-color, #000000) !important;
  padding: 8px 16px !important;
  height: 32px !important;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormFieldSelect-module_xapp_checkbox_select__QccWu {
    height: 44px !important;
  }
}

.FormFieldSelect-module_xapp_select_container__HWy4J {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto a new row */
  justify-content: center; /* Centers items horizontally */
}

.FormFieldSelect-module_xapp_select_title_container__tnfQy {
  text-align: center; /* Keeps the title over the centered options */
}
.FormFieldSelect-module_xapp_select_title_container__tnfQy p {
  font-family: var(--xapp-form-widget-checkbox-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
  color: var(--xapp-form-widget-checkbox-color, #000000);
}
.FormFieldSelect-module_xapp_select_title_container__empty__zC4gk p {
  margin: 0;
}
.FormFieldCard-module_xapp_form_card__AcVAf img {
  width: 50% !important;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.MuiChip-label {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.FormFieldChips-module_xapp_checkbox_chip__8DRkb {
  margin: 6px !important;
  font-size: var(--xapp-form-widget-chips-font-size, 0.875em) !important;
  font-family: var(--xapp-form-widget-chips-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
  padding: 8px 16px !important;
  height: 32px !important;
  border-radius: var(--xapp-form-widget-border-radius-lg, 16px) !important;
  min-width: 130px !important;
  background-color: var(--xapp-form-widget-chips-background-color, #c4dced) !important;
  color: var(--xapp-form-widget-chips-color, #000000) !important;
  cursor: pointer;
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out !important;
}
.FormFieldChips-module_xapp_checkbox_chip__8DRkb .MuiChip-label {
  font-family: var(--xapp-form-widget-chips-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
}
.FormFieldChips-module_xapp_checkbox_chip__8DRkb:hover {
  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
  transform: translateY(-1px);
}
.FormFieldChips-module_xapp_checkbox_chip__8DRkb:active {
  transform: scale(0.98) !important;
}
.FormFieldChips-module_xapp_checkbox_chip__8DRkb:focus {
  outline: none;
}
.FormFieldChips-module_xapp_checkbox_chip__8DRkb:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormFieldChips-module_xapp_checkbox_chip__8DRkb {
    min-width: 100px !important;
    font-size: 16px !important;
    height: 44px !important;
  }
  .FormFieldChips-module_xapp_checkbox_chip__8DRkb .MuiChip-label {
    margin: 0;
  }
}

.FormFieldChips-module_xapp_chip_clicked__S8xmo {
  background-color: var(--xapp-form-widget-chips-background-color-selected, var(--xapp-form-widget-chips-background-color-dark, #6e7ae1)) !important;
  color: var(--xapp-form-widget-chips-color-selected, #ffffff) !important;
  box-shadow: 0 2px 8px rgba(110, 122, 225, 0.3) !important;
}

.FormFieldChips-module_xapp_chips_container__ZITF5 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.FormFieldChips-module_xapp_chip_wrapper__AGfKl {
  flex: 0 0 calc(33.33% - 10px);
  margin: 0 2px;
  text-align: center;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormFieldChips-module_xapp_chip_wrapper__AGfKl {
    margin: 0 2px;
  }
}

.FormFieldChips-module_xapp_chips_title_container__VGw77 {
  margin: inherit;
}
.FormFieldChips-module_xapp_chips_title_container__VGw77 p {
  font-family: var(--xapp-form-widget-chips-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.3;
}
.FormFieldChips-module_xapp_chips_title_container__empty__5seHa p {
  margin: 10px 0;
}
.FormFieldTextInput-module_xapp_text_input_container__title__zeqDT p {
  margin: 0;
  font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
}
.FormFieldTextInput-module_xapp_text_input_container__field__B5K33 {
  position: relative;
}

.FormFieldTextInput-module_xapp_text_input_counter__oSgo1 {
  position: absolute;
  right: 36px;
  bottom: 8px;
  font-size: 12px;
  color: #666;
  font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
  transition: color 200ms ease-in-out;
}
.FormFieldTextInput-module_xapp_text_input_counter--limit__59Lau {
  color: #d32f2f;
  font-weight: 500;
}

.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiFilledInput-root::before,
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiFilledInput-root::after {
  display: var(--xapp-form-widget-text-underline-display, block) !important;
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input {
  padding: 21px 12px 4px 12px !important;
  border: var(--xapp-form-widget-text-border-width, 0) solid var(--xapp-form-widget-text-border-color, transparent) !important;
  background-color: var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06)) !important;
  border-radius: var(--xapp-form-widget-border-radius-sm, 8px) !important;
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out !important;
  color: var(--xapp-form-widget-text-color, rgba(0, 0, 0, 0.87)) !important;
  font-size: var(--xapp-form-widget-text-font-size, 1rem) !important;
  font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border-width: var(--xapp-form-widget-text-border-width, 0) !important;
  border-style: solid !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input:hover {
  background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
  border-color: var(--xapp-form-widget-text-border-color-focus, var(--xapp-form-widget-text-border-color, transparent)) !important;
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-input:focus {
  background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
  border-color: var(--xapp-form-widget-text-border-color-focus, var(--xapp-form-widget-text-border-color, transparent)) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54)) !important;
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiTextField-root {
  background-color: var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06)) !important;
  border-radius: var(--xapp-form-widget-border-radius-sm, 8px);
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiTextField-root .MuiInputLabel-root.MuiInputLabel-multiline {
  top: 8px;
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputLabel-root {
  transform: translate(12px, 13px) scale(1) !important;
  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms !important;
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputLabel-root.MuiInputLabel-shrink {
  transform: translate(12px, 4px) scale(0.75) !important;
}
.FormFieldTextInput-module_xapp_text_input_text__3rHVn .MuiInputBase-multiline {
  padding: 0px;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.FormFieldDropdown-module_xapp_dropdown_container__4oRlr {
  margin-top: 20px;
  margin-bottom: 20px;
}
.FormFieldDropdown-module_xapp_dropdown_container__4oRlr .MuiInputBase-input,
.FormFieldDropdown-module_xapp_dropdown_container__4oRlr select {
  font-size: var(--xapp-form-widget-dropdown-font-size, 14px);
  font-family: var(--xapp-form-widget-dropdown-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormFieldDropdown-module_xapp_dropdown_container__4oRlr .MuiInputBase-input,
  .FormFieldDropdown-module_xapp_dropdown_container__4oRlr select {
    font-size: var(--xapp-form-widget-dropdown-font-size-mobile, 16px);
  }
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.FormFieldDate-module_xapp_date_picker_container__d8LYB {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--xapp-form-widget-date-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
}

.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-weekDayLabel {
  width: 30px !important;
  height: 32px !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersCalendarHeader-root {
  margin-top: 10px !important;
  margin-bottom: 4px !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-slideTransition {
  min-height: 200px !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersArrowSwitcher-button {
  color: rgba(0, 0, 0, 0.54) !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersArrowSwitcher-button:hover {
  background-image: unset !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersArrowSwitcher-button:focus {
  background-image: unset !important;
  outline: unset !important;
  border: 0 !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root.MuiButtonBase-root:hover {
  background-image: unset !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root.MuiButtonBase-root:focus {
  background-image: unset !important;
  outline: unset !important;
  border: 0 !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root {
  padding: 0px !important;
  font-family: inherit !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root.Mui-selected {
  color: #fff !important;
  background-color: #1976d2 !important;
  font-weight: 600 !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-today {
  font-weight: bold !important;
  color: #321aa3 !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin {
  width: 30px !important;
  height: 30px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin:hover {
  background-image: unset !important;
  background-color: #cfd8da !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin:focus {
  background-image: unset !important;
  background-color: #1976d2 !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin.Mui-disabled {
  font-weight: 300 !important;
  text-decoration: line-through !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .FormFieldDate-module_xapp_date_picker_past__ECo-S {
  background-color: rgba(48, 49, 53, 0.2392156863) !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .FormFieldDate-module_xapp_date_picker_available__2Xtlu {
  background-color: rgba(0, 255, 21, 0.1607843137) !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .FormFieldDate-module_xapp_date_picker_blocked__e-aNY {
  background-color: rgba(175, 177, 182, 0.2392156863) !important;
}
.FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-weekDayLabel {
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

/* Mobile: 44x44 tappable day cells.
 *
 * Date selection is the most expensive mis-tap in this funnel - the visitor either books the
 * wrong day or gives up - and MUI ships 36x36 cells (30x30 once the rules above apply). Both
 * are under the 44x44 that Apple's HIG and WCAG 2.5.8 ask for.
 *
 * `:global(...)` rather than the bare MUI class names used above, and that difference is not
 * cosmetic. The two builds treat this file differently: rollup's postcss-modules is
 * configured with a `generateScopedName` that returns every name unchanged, so the plain
 * selectors above do match MUI's classes in the published bundle - but Storybook's css-loader
 * hashes them, so up there they match nothing and the calendar renders at MUI's own defaults.
 * `:global` is honoured by both, so these rules land either way. (The rules above are left as
 * they are: making them global too would change the shipped calendar, which is not what this
 * issue is about.)
 *
 * The seven columns have to keep fitting inside MUI's 320px-wide calendar, and 7 x 44 = 308
 * only fits once the 2px side margins on each cell go - hence dropping the gap rather than
 * the cell, per the issue.
 */
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-root,
  .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersDay-dayWithMargin {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
  }
  .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-weekDayLabel {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }
  .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiDayCalendar-slideTransition {
    min-height: 264px !important;
  }
  .FormFieldDate-module_xapp_date_picker__Rvtj1 .MuiPickersArrowSwitcher-button {
    width: 44px !important;
    height: 44px !important;
  }
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.FormFieldDateTime-module_xapp_datetime__rPNwE {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-family: var(--xapp-form-widget-date-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
}

.FormFieldDateTime-module_xapp_datetime_title__VNHwW {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
}

/* Calendar and column side by side on a wide enough viewport.
 *
 * `flex-wrap` rather than a fixed two-column grid: the pair has to be allowed to fall
 * onto two rows rather than force the step to scroll sideways, which is the failure the
 * mobile rule below would otherwise only fix at the breakpoint. */
.FormFieldDateTime-module_xapp_datetime_body__ta9Ui {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.FormFieldDateTime-module_xapp_datetime_calendar__Ge5W6 {
  flex: 0 0 auto;
}

/* The zone notice and the column travel together, so the sizing the column used to own
 * lives here now - the column itself keeps only the scrolling, which the notice must
 * stay outside of or it scrolls away from the times it describes. */
.FormFieldDateTime-module_xapp_datetime_times_column__UY7ho {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 240px;
}

.FormFieldDateTime-module_xapp_datetime_timezone__ZE56Q {
  margin: 0;
  padding: 0 4px;
  font-size: var(--xapp-form-widget-date-font-size, 14px);
  text-align: left;
}

/* A column of buttons rather than chips: a half-hour schedule produces 16 or more
 * offerings and chips wrap into an unreadable block past a handful. */
.FormFieldDateTime-module_xapp_datetime_times__rhU-O {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}

.FormFieldDateTime-module_xapp_datetime_group__CeL-E {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 4px 0 0;
  padding: 4px 0;
  background-color: #ffffff;
  font-family: inherit;
  font-size: var(--xapp-form-widget-date-font-size, 14px);
  font-weight: 600;
  text-align: left;
}

.FormFieldDateTime-module_xapp_datetime_time__x5lxl {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--xapp-form-widget-chips-background-color, #c4dced);
  border-radius: var(--xapp-form-widget-border-radius-sm, 8px);
  background-color: transparent;
  /* Not $form-chips-color: that is the chips' FOREGROUND, authored to sit on the filled
   * chip background. This button is transparent, so a theme whose chips are dark with
   * white text - the common case - renders white on white and the times vanish. The
   * body text colour is the one that belongs on the form's own background. */
  color: var(--xapp-form-widget-text-color, rgba(0, 0, 0, 0.87));
  font-family: var(--xapp-form-widget-chips-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
  font-size: var(--xapp-form-widget-chips-font-size, 0.875em);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out;
}
.FormFieldDateTime-module_xapp_datetime_time__x5lxl:hover {
  background-color: var(--xapp-form-widget-chips-background-color, #c4dced);
  /* Background and foreground move together: whenever the chip background is
   * applied, the colour the theme paired with it applies too. */
  color: var(--xapp-form-widget-chips-color, #000000);
  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
}
.FormFieldDateTime-module_xapp_datetime_time__x5lxl:active {
  transform: scale(0.98);
}
.FormFieldDateTime-module_xapp_datetime_time__x5lxl:focus {
  outline: none;
}
.FormFieldDateTime-module_xapp_datetime_time__x5lxl:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormFieldDateTime-module_xapp_datetime_time__x5lxl {
    font-size: 16px;
  }
}

.FormFieldDateTime-module_xapp_datetime_time_selected__IRT84 {
  border-color: var(--xapp-form-widget-chips-background-color-selected, var(--xapp-form-widget-chips-background-color-dark, #6e7ae1));
  background-color: var(--xapp-form-widget-chips-background-color-selected, var(--xapp-form-widget-chips-background-color-dark, #6e7ae1));
  color: var(--xapp-form-widget-chips-color-selected, #ffffff);
}
.FormFieldDateTime-module_xapp_datetime_time_selected__IRT84:hover {
  background-color: var(--xapp-form-widget-chips-background-color-selected, var(--xapp-form-widget-chips-background-color-dark, #6e7ae1));
}

.FormFieldDateTime-module_xapp_datetime_message__4rf-S {
  margin: 8px 0;
  font-size: var(--xapp-form-widget-date-font-size, 14px);
  text-align: center;
}

.FormFieldDateTime-module_xapp_datetime_error__bTyZK {
  margin-top: 14px;
}

/* Stacked, with the column under the calendar and given room to scroll on its own. */
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormFieldDateTime-module_xapp_datetime_body__ta9Ui {
    flex-direction: column;
    align-items: center;
  }
  .FormFieldDateTime-module_xapp_datetime_times_column__UY7ho {
    width: 100%;
    max-width: 320px;
  }
  .FormFieldDateTime-module_xapp_datetime_times__rhU-O {
    max-height: 260px;
  }
}
.FormFieldTextInputAddress-module_xapp_text_input_address_container__title__IbovL p {
  margin: 0;
  font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
}

.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input {
  padding: 21px 12px 4px 12px !important;
  border: 0 !important;
  background-color: var(--xapp-form-widget-text-input-background, var(--xapp-form-widget-text-background-color, rgba(0, 0, 0, 0.06))) !important;
  border-radius: var(--xapp-form-widget-border-radius-sm, 8px) !important;
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out !important;
  color: var(--xapp-form-widget-text-color, rgba(0, 0, 0, 0.87)) !important;
  font-size: var(--xapp-form-widget-text-font-size, 1rem) !important;
  font-family: var(--xapp-form-widget-text-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif)) !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input:hover {
  background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputBase-input:focus {
  background-color: var(--xapp-form-widget-text-background-color-dark, rgba(0, 0, 0, 0.09)) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54)) !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root {
  background-color: var(--xapp-form-widget-text-root-background, rgba(0, 0, 0, 0.06)) !important;
  border: var(--xapp-form-widget-text-root-border, 0) !important;
  border-radius: var(--xapp-form-widget-text-root-radius, 4px 4px 0 0) !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root:hover, .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root.Mui-focused {
  border-color: var(--xapp-form-widget-text-border-color-focus, var(--xapp-form-widget-text-border-color, transparent)) !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root::before, .FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root::after {
  display: var(--xapp-form-widget-text-underline-display, block) !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiFilledInput-root {
  padding-top: 0 !important;
  padding-left: 0 !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiAutocomplete-root {
  padding-top: 0 !important;
  padding-left: 0 !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiPopper-root-MuiAutocomplete-popper {
  z-index: 16000;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputLabel-root {
  transform: translate(12px, 13px) scale(1) !important;
  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms !important;
}
.FormFieldTextInputAddress-module_xapp_text_input_address__-FQjM .MuiInputLabel-root.MuiInputLabel-shrink {
  transform: translate(12px, 4px) scale(0.75) !important;
}

.MuiAutocomplete-popper {
  z-index: 16000 !important;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.FormStepDisplay-module_xapp_step_iframe_wrapper__BBFRw {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: scroll;
  position: relative;
}

.FormStepDisplay-module_xapp_step_full_bleed__rhGGK {
  margin-left: -8px;
  margin-right: -8px;
}
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormStepDisplay-module_xapp_step_full_bleed__rhGGK {
    margin-left: calc(-1 * (8px + env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * (8px + env(safe-area-inset-right, 0px)));
  }
}

.FormStepDisplay-module_xapp_external_widget_container__ec4Hs {
  background-color: var(--xapp-form-widget-external-widget-background-color, transparent);
  padding: var(--xapp-form-widget-external-widget-padding, 0);
  min-height: var(--xapp-form-widget-external-widget-min-height, auto);
  box-sizing: border-box;
}

.FormStepDisplay-module_xapp_external_widget_anchor__NSXBg {
  margin: 0;
  padding: 0;
}

.FormStepDisplay-module_xapp_external_widget_fallback__lkFJ- {
  padding: 20px;
  text-align: center;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
}

.FormStepDisplay-module_xapp_external_widget_loading__aRtx6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 240px;
  padding: 40px 20px;
  text-align: center;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  color: var(--xapp-form-widget-text-color, rgba(0, 0, 0, 0.87));
}
.FormStepDisplay-module_xapp_external_widget_loading__aRtx6 p {
  margin: 0;
  font-size: 0.95em;
  opacity: 0.7;
}

.FormStepDisplay-module_xapp_external_widget_spinner__ga0X7 {
  display: inline-block;
  width: 44px;
  height: 44px;
  color: var(--xapp-form-widget-primary-button-color, #ea6539);
}
.FormStepDisplay-module_xapp_external_widget_spinner__ga0X7 svg {
  width: 100%;
  height: 100%;
}

.FormStepDisplay-module_xapp_submit_error__Zbqdj {
  padding: 12px 20px;
  text-align: center;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  color: #b3261e;
}

.FormStepDisplay-module_xapp_formfield__hRmVx {
  display: none;
  font-family: inherit !important;
}
.FormStepDisplay-module_xapp_formfield__hRmVx.FormStepDisplay-module_active__fCsMz {
  display: block;
}
.FormStepDisplay-module_xapp_formfield_title__INjeF p {
  margin: 10px 0 20px 0;
  font-size: 1em;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
}
.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-clearIndicator,
.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator {
  color: rgba(0, 0, 0, 0.54) !important;
  background-color: transparent !important;
  transition: background-color 200ms ease-in-out !important;
}
.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-clearIndicator:hover,
.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator:hover {
  background-image: unset !important;
  background-color: #cfd8da !important;
}
.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-clearIndicator:focus,
.FormStepDisplay-module_xapp_formfield__hRmVx .MuiAutocomplete-popupIndicator:focus {
  background-image: unset !important;
}

.FormStepDisplay-module_xapp_formfield_title__INjeF p {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  text-align: var(--xapp-form-widget-step-title-align, left);
  font-size: var(--xapp-form-widget-step-title-font-size, inherit);
  font-weight: var(--xapp-form-widget-step-title-font-weight, inherit);
  color: var(--xapp-form-widget-step-title-color, inherit);
}

.FormStepDisplay-module_xapp_formfield_subtitle__8VQC2 {
  font-size: 0.875em;
  opacity: 0.8;
}

.FormStepDisplay-module_xapp_form_actions__lXYdk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.FormStepDisplay-module_xapp_form_actions_final__0TUxT {
  flex-direction: var(--xapp-form-widget-final-button-direction, column);
  gap: var(--xapp-form-widget-final-button-gap, 0);
}
.FormStepDisplay-module_xapp_form_actions_final__0TUxT .FormStepDisplay-module_xapp_final_button_container__Gco-E {
  padding: var(--xapp-form-widget-final-button-container-padding, 20px 20px 0 20px);
}
.FormStepDisplay-module_xapp_form_actions_final__0TUxT .FormStepDisplay-module_xapp_form_nav_buttons__lI4BI {
  padding: var(--xapp-form-widget-final-button-nav-padding, 20px);
  flex: var(--xapp-form-widget-final-button-nav-flex, 1 1 auto);
  align-self: var(--xapp-form-widget-final-button-nav-align, stretch);
  align-items: center;
}

.FormStepDisplay-module_xapp_final_button_container__Gco-E {
  display: flex;
  justify-content: center;
  padding: 20px 20px 0 20px;
}
.FormStepDisplay-module_xapp_final_button_container__Gco-E button {
  font-size: var(--xapp-form-widget-button-font-size, 1.2em) !important;
  padding: var(--xapp-form-widget-button-padding, 12px 32px) !important;
  min-width: 200px !important;
  border-radius: var(--xapp-form-widget-button-radius, var(--xapp-form-widget-border-radius-md, 12px)) !important;
}

.FormStepDisplay-module_xapp_form_nav_buttons__lI4BI {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-self: stretch;
}

.FormStepDisplay-module_xapp_dummy_button__Q-nE6 {
  flex-grow: 1;
}

.FormStepDisplay-module_xapp_primary_button__d2wra {
  background-color: var(--xapp-form-widget-primary-button-color, #ea6539) !important;
  font-family: inherit !important;
  border-radius: var(--xapp-form-widget-button-radius, var(--xapp-form-widget-border-radius-md, 12px)) !important;
  font-size: var(--xapp-form-widget-button-font-size, 0.875rem) !important;
  font-weight: var(--xapp-form-widget-button-font-weight, 500) !important;
  padding: var(--xapp-form-widget-button-padding, 6px 16px) !important;
  min-height: 44px !important;
  box-shadow: var(--xapp-form-widget-button-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)) !important;
  transition: box-shadow 200ms ease-in-out, transform 150ms ease-in-out, opacity 200ms ease-in-out !important;
}
.FormStepDisplay-module_xapp_primary_button__d2wra:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  opacity: 0.9 !important;
}
.FormStepDisplay-module_xapp_primary_button__d2wra:active {
  transform: scale(0.98) !important;
}
.FormStepDisplay-module_xapp_primary_button__d2wra:focus {
  outline: none;
}
.FormStepDisplay-module_xapp_primary_button__d2wra:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}

.FormStepDisplay-module_xapp_secondary_button__LuMfN {
  background-color: var(--xapp-form-widget-secondary-button-color, #d24cc7) !important;
  font-family: inherit !important;
  border-radius: var(--xapp-form-widget-button-radius, var(--xapp-form-widget-border-radius-md, 12px)) !important;
  font-size: var(--xapp-form-widget-button-font-size, 0.875rem) !important;
  font-weight: var(--xapp-form-widget-button-font-weight, 500) !important;
  padding: var(--xapp-form-widget-button-padding, 6px 16px) !important;
  min-height: 44px !important;
  box-shadow: var(--xapp-form-widget-button-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)) !important;
  transition: box-shadow 200ms ease-in-out, transform 150ms ease-in-out, opacity 200ms ease-in-out !important;
}
.FormStepDisplay-module_xapp_secondary_button__LuMfN:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  opacity: 0.9 !important;
}
.FormStepDisplay-module_xapp_secondary_button__LuMfN:active {
  transform: scale(0.98) !important;
}
.FormStepDisplay-module_xapp_secondary_button__LuMfN:focus {
  outline: none;
}
.FormStepDisplay-module_xapp_secondary_button__LuMfN:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}

.FormStepDisplay-module_xapp_disabled_button__RjSfL {
  background-color: var(--xapp-form-widget-secondary-button-color, #d24cc7) !important;
  opacity: 0.5 !important;
  font-family: inherit !important;
  border-radius: var(--xapp-form-widget-button-radius, var(--xapp-form-widget-border-radius-md, 12px)) !important;
  font-size: var(--xapp-form-widget-button-font-size, 0.875rem) !important;
  font-weight: var(--xapp-form-widget-button-font-weight, 500) !important;
  padding: var(--xapp-form-widget-button-padding, 6px 16px) !important;
  min-height: 44px !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
.FormStepDisplay-module_xapp_back_button__mPqT0 {
  background: var(--xapp-form-widget-back-button-background, var(--xapp-form-widget-primary-button-color, #ea6539)) !important;
  border: var(--xapp-form-widget-back-button-border, 0) !important;
  border-radius: var(--xapp-form-widget-back-button-radius, var(--xapp-form-widget-border-radius-md, 12px)) !important;
  padding: var(--xapp-form-widget-back-button-padding, 6px 16px) !important;
  min-width: var(--xapp-form-widget-back-button-size, 64px) !important;
  width: var(--xapp-form-widget-back-button-size, auto) !important;
  height: var(--xapp-form-widget-back-button-size, auto) !important;
  color: var(--xapp-form-widget-back-button-color, var(--xapp-form-widget-primary-button-text-color, #b7c5d1)) !important;
  font-size: var(--xapp-form-widget-back-button-font-size, 0.875rem) !important;
  font-weight: var(--xapp-form-widget-back-button-font-weight, 500) !important;
  box-shadow: var(--xapp-form-widget-back-button-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)) !important;
}
.FormStepDisplay-module_xapp_back_button__mPqT0:hover {
  color: var(--xapp-form-widget-back-button-color-hover, var(--xapp-form-widget-primary-button-text-color, #b7c5d1)) !important;
  border-color: var(--xapp-form-widget-back-button-color-hover, currentColor) !important;
}

.FormStepDisplay-module_xapp_back_button_label__9kKIl {
  display: var(--xapp-form-widget-back-button-label-display, inline);
}

.FormStepDisplay-module_xapp_back_button_icon__w7o4I {
  display: var(--xapp-form-widget-back-button-icon-display, none);
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  -webkit-text-stroke: var(--xapp-form-widget-back-button-icon-stroke, 0);
}
/**
 * CostGuide / Contractor Appointments booking-embed style overrides.
 *
 * The partner renders its form into #airo-anchor in the light DOM with stable, semantic
 * class names (spike: chat-widget#1514). This is a plain (non-module) stylesheet on purpose
 * so the selectors below emit literally rather than being scoped -- they target the partner's
 * own markup, not ours.
 *
 * Two hard constraints from the spike:
 *  1. Their rules are scoped `#airo-anchor #step-<name> .<class>` (two ids + a class), so a
 *     plain `#airo-anchor .btn-next` measurably loses. Overrides must carry `#airo-anchor`
 *     specificity AND `!important` to win.
 *  2. Most of their text inherits the container font, but `input` is explicitly Arial, so the
 *     font must be re-applied to inputs directly.
 *
 * Every value maps to a `--xapp-form-widget-*` theme variable (with a fallback matching
 * `styles/_variables.scss`), so a Studio-themed widget restyles the partner's form too --
 * nothing here is a hard-coded color, font, or radius.
 *
 * Partner selectors verified: 2026-08-04. Re-verify against their markup per chat-widget#1516.
 */
/* Primary action buttons: btn-next / btn-orange */
#airo-anchor .btn-next,
#airo-anchor .btn-orange {
  background-color: var(--xapp-form-widget-primary-button-color, #ea6539) !important;
  color: var(--xapp-form-widget-primary-button-text-color, #b7c5d1) !important;
  border-radius: var(--xapp-form-widget-border-radius-md, 12px) !important;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}

/* Secondary / back button: btn-back */
#airo-anchor .btn-back {
  background-color: var(--xapp-form-widget-secondary-button-color, #d24cc7) !important;
  color: var(--xapp-form-widget-secondary-button-text-color, #b7c5d1) !important;
  border-radius: var(--xapp-form-widget-border-radius-md, 12px) !important;
}

/* Headings and body text: stepwrap / ms-title / ms-subtitle / page-title / label-item */
#airo-anchor .stepwrap,
#airo-anchor .ms-title,
#airo-anchor .ms-subtitle,
#airo-anchor .page-title,
#airo-anchor .label-item {
  color: var(--xapp-form-widget-text-color, rgba(0, 0, 0, 0.87)) !important;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}

/* Inputs are explicitly Arial in their sheet, so the inherited container font never reaches
   them -- re-apply directly (spike finding). radio-item grouped for the same reason. */
#airo-anchor input,
#airo-anchor .radio-item {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}

/* Focus rings consistent with ours rather than their default orange. */
#airo-anchor input:focus,
#airo-anchor .btn-next:focus,
#airo-anchor .btn-back:focus {
  outline-color: var(--xapp-form-widget-focus-ring-color, #012b54) !important;
}
.FormFrame-module_xapp_form_frame_root__BLTha {
  display: block;
}

.FormFrame-module_xapp_form_frame_intro__S4kWd {
  background-color: #ffffff;
  padding: 28px 16px 18px;
  text-align: center;
}

.FormFrame-module_xapp_form_frame_title__GA8dy {
  margin: 0;
  font-family: Poppins, Arial, Verdana, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--xapp-form-widget-text-color, rgba(0, 0, 0, 0.87));
}

.FormFrame-module_xapp_form_frame_subtitle__WOeJI {
  margin: 6px 0 0 0;
  font-family: Poppins, Arial, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--xapp-form-widget-text-color, rgba(0, 0, 0, 0.87));
  opacity: 0.75;
}

.FormFrame-module_xapp_form_frame_framed__9E311 {
  position: relative;
  border: 4px solid var(--xapp-form-widget-border-color, #d3d3df);
  border-radius: 0;
  background-color: var(--xapp-form-widget-background-color, #f3f8fb);
  margin-top: -2px;
  padding: 24px 22px 8px;
}

.FormFrame-module_xapp_form_frame_plain__rBarK {
  display: block;
}

.FormFrame-module_xapp_form_frame_tab_row__osSVR {
  background-color: #ffffff;
  text-align: center;
}

.FormFrame-module_xapp_form_frame_tab__0O2ga {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 12px 30px;
  border-radius: 12px 12px 0 0;
  background-color: var(--xapp-form-widget-header-background-color, #012b54);
  color: var(--xapp-form-widget-header-text-color, #b7c5d1);
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
}
.SimpleNavigationHeader-module_xapp_navigation_header__YhCD1 {
  background-color: inherit !important;
}

.SimpleNavigationHeader-module_xapp_navigation_header_showcase__NhRLn {
  background-color: inherit !important;
  padding: 0px !important;
}

.SimpleNavigationHeader-module_xapp_navigation_header_container__V9y-e {
  background-color: inherit !important;
}
.FormDisplay-module_xapp_formstep__OW1rY {
  display: none;
  padding: 8px;
}
.FormDisplay-module_xapp_formstep__OW1rY.FormDisplay-module_active__5wTV3 {
  display: block;
  background-color: var(--xapp-form-widget-background-color, #f3f8fb) !important;
}
.FormDisplay-module_xapp_formstep__OW1rY.FormDisplay-module_title__-BtIw p {
  margin: 10px 0 0 0;
}
.FormDisplay-module_xapp_formstep__OW1rY {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}

.FormDisplay-module_xapp_header_container__Y-eFl {
  background-color: var(--xapp-form-widget-header-background-color, #012b54) !important;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 1000;
  min-height: 88px;
  padding-top: 16px;
}
.FormDisplay-module_xapp_header_container__Y-eFl .FormDisplay-module_empty_step_header__eHbBH {
  height: 42px;
}
.FormDisplay-module_xapp_header_container__Y-eFl {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.FormDisplay-module_xapp_header_container__Y-eFl .MuiTypography-root {
  color: var(--xapp-form-widget-header-text-color, #b7c5d1) !important;
}

.FormDisplay-module_xapp_header_container_showcase__MWJfr {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: var(--xapp-form-widget-header-background-color, #012b54) !important;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
}
.FormDisplay-module_xapp_header_container_showcase__MWJfr .FormDisplay-module_empty_step_header__eHbBH {
  height: 42px;
}
.FormDisplay-module_xapp_header_container_showcase__MWJfr {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.FormDisplay-module_xapp_header_container_showcase__MWJfr .MuiTypography-root {
  color: var(--xapp-form-widget-header-text-color, #b7c5d1) !important;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.SearchResponseOutputSpeech-module_xapp_search_response_output_speech__DCf8F {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  font-weight: normal;
  font-size: 16px;
  font-style: normal;
  color: #000;
}
.SearchResponseOutputSpeech-module_xapp_search_response_output_speech__DCf8F p {
  margin: 0 0 1em 0;
}
.SearchResponseOutputSpeech-module_xapp_search_response_output_speech__DCf8F p:last-child {
  margin-bottom: 0;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.Button-module_xapp_search_btn__cQf3T {
  display: inline-block;
  border-radius: var(--xapp-form-widget-border-radius-md, 12px);
  border: solid 1px var(--xapp-form-widget-border-color, #d3d3df);
  background: white;
  padding: 4px 24px;
  color: black;
  text-decoration: none;
  box-sizing: border-box;
  text-align: center;
  line-height: normal;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out;
}
.Button-module_xapp_search_btn__cQf3T:hover {
  background-color: rgba(0, 0, 0, 0.04);
  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
}
.Button-module_xapp_search_btn__cQf3T:active {
  transform: scale(0.98);
}
.Button-module_xapp_search_btn__cQf3T:focus {
  outline: none;
}
.Button-module_xapp_search_btn__cQf3T:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}
.Button-module_xapp_search_btn__expand__dUwot {
  width: 100%;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.SuggestedAction-module_xapp_search_suggested_action__gbLCz {
  display: inline-block;
  border-radius: var(--xapp-form-widget-border-radius-md, 12px);
  border: solid 1px var(--xapp-form-widget-border-color, var(--xapp-form-accent-color, #d3d3df));
  background: white;
  padding: 4px 24px;
  color: black;
  text-decoration: none;
  box-sizing: border-box;
  text-align: center;
  line-height: normal;
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out;
}
.SuggestedAction-module_xapp_search_suggested_action__gbLCz:hover {
  background-color: rgba(0, 0, 0, 0.04);
  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
}
.SuggestedAction-module_xapp_search_suggested_action__gbLCz:active {
  transform: scale(0.98);
}
.SuggestedAction-module_xapp_search_suggested_action__gbLCz:focus {
  outline: none;
}
.SuggestedAction-module_xapp_search_suggested_action__gbLCz:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}
.SuggestedActions-module_xapp_search_suggested_actions__actions__Apv0- {
  margin-top: 8px;
  margin-bottom: 8px;
}
.SuggestedActions-module_xapp_search_suggested_actions__item__Q7nQb {
  margin-right: 16px;
}
.SearchResponsePart-module_xapp_search_response_part__sF6gs {
  margin-bottom: 12px;
  margin-top: 86px;
  border-radius: 8px;
}
.SearchResponsePart-module_xapp_search_response_part__sF6gs.SearchResponsePart-module_noHeaderForm__HdlyL {
  margin-top: 12px;
}
.SearchResponsePart-module_xapp_search_response_part__sF6gs:has([data-xapp-header-suppressed]) {
  margin-top: 12px;
}
.FormResponse-module_xapp_search_response__r2YN1 {
  padding: 0 10px;
  overflow: auto;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.FormWidget-module_loading__aAJ-B {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 0px !important;
}

.FormWidget-module_xapp_form_widget__V-G-H {
  display: flex;
  flex-direction: column;
  border: solid 1px var(--xapp-form-widget-border-color, #d3d3df);
  background: var(--xapp-form-widget-background-color, #f3f8fb);
  border-radius: var(--xapp-form-widget-border-radius-xl, 20px);
  overflow: hidden;
  max-width: 740px;
  max-height: 100%;
  box-shadow: var(--xapp-form-widget-box-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
  box-sizing: border-box;
  position: relative;
}
.FormWidget-module_xapp_form_widget__V-G-H:has([data-xapp-bare-handoff]) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.FormWidget-module_xapp_form_widget__V-G-H:has([data-xapp-bare-handoff]) .FormWidget-module_xapp_form_widget__content__a9NXC {
  border-top: 0;
}
.FormWidget-module_xapp_form_widget__content__a9NXC {
  display: flex;
  flex-direction: column;
  border-top: solid 1px var(--xapp-form-widget-border-color, #d3d3df);
  max-height: 100%;
  min-height: 128px;
  overflow: hidden;
  width: 100%;
}
.FormWidget-module_xapp_form_widget__response__X8Hbz {
  padding-top: 1em;
}
.FormWidget-module_xapp_form_widget__spinner__FBxso {
  width: 100px;
  height: 100px;
  margin: auto;
  padding: 20px;
}
.FormWidget-module_xapp_form_widget__close__0lp0O {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  cursor: pointer;
  font-weight: bold;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
  transition: background-color 200ms ease-in-out, transform 150ms ease-in-out, box-shadow 200ms ease-in-out;
  box-shadow: var(--xapp-form-widget-box-shadow-subtle, 0 2px 8px rgba(0, 0, 0, 0.08));
}
.FormWidget-module_xapp_form_widget__close__0lp0O::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.FormWidget-module_xapp_form_widget__close__0lp0O:hover {
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}
.FormWidget-module_xapp_form_widget__close__0lp0O:active {
  transform: scale(0.95);
}
.FormWidget-module_xapp_form_widget__close__0lp0O:focus {
  outline: none;
}
.FormWidget-module_xapp_form_widget__close__0lp0O:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}

/* A width per breakpoint, capped at the container.
 *
 * These used to set `width` in pixels, derived from the VIEWPORT, which says
 * nothing about the container the widget was actually put in. Anywhere
 * narrower -- get.xapp.ai embeds the form in a ~548px frame -- it rendered at
 * 740px and spilled out, clipped and silent. #1687.
 *
 * #1690 answered that with `width: 100%` and a `max-width` cap, which broke the
 * floating popup instead: its body is a centred flex item that shrinks to fit,
 * so 100% of it is the form's own content width, and a step of stacked fields
 * rendered as a ~175-260px sliver in the middle of a desktop page.
 *
 * So the width is definite again and the container caps it: `max-width: 100%`
 * lets it shrink inside a narrower frame, and a shrink-to-fit parent sizes to
 * the definite width rather than to the content. Its own date/time layout is
 * flex-wrap: wrap, so it stacks unaided once two columns no longer fit.
 */
@media (min-width: 1201px) {
  .FormWidget-module_xapp_form_widget__V-G-H {
    width: 740px;
    max-width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .FormWidget-module_xapp_form_widget__V-G-H {
    width: 600px;
    max-width: 100%;
  }
}
@media (min-width: 641px) and (max-width: 991px) {
  .FormWidget-module_xapp_form_widget__V-G-H {
    width: 500px;
    max-width: 100%;
  }
}
/* Mobile */
@media (max-width: 640px), (max-height: 480px) and (pointer: coarse) {
  .FormWidget-module_xapp_form_widget__V-G-H {
    width: 100%;
    max-width: none;
    height: 100%;
    border-radius: 0;
    border: 0;
  }
  .FormWidget-module_xapp_form_widget__content__a9NXC {
    width: 100%;
    border-top: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}
.FormWidget-module_embedded__UB1Gi {
  width: 100%;
  height: 100%;
  max-width: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
/**
 * The phone breakpoint.
 *
 * Width alone cannot express "phone". A phone on its side is 740-863px wide - wider than
 * an iPad in portrait - so `max-width: 640px` silently excluded every landscape phone, and
 * with it the full-screen panel, the full-bleed modal, the 44px hit boxes, the safe-area
 * insets and the soft-keyboard padding. Measured on 2026-08-13: in landscape the chat
 * input sat ~22px from the bottom of a 340px viewport, so any keyboard covered it, and the
 * form step's action row was unreachable. XappMedia/chat-widget#1561.
 *
 * The second arm adds short-and-touch, which is what a landscape phone is. Verified in
 * Chromium against device descriptors: it matches iPhone 14, Pixel 7 and Galaxy S8 in
 * landscape, and matches no iPad in either orientation and no desktop. `pointer: coarse`
 * reports the PRIMARY pointer, so a touch laptop driven by a trackpad stays on desktop.
 *
 * Use this instead of writing the query by hand, so the definition lives in one place.
 */
.SideButton-module_xapp_form_sticky_button__YqORL {
  position: fixed;
  z-index: 10000;
  cursor: pointer;
  transform: translateY(-50%);
  text-align: center;
  writing-mode: vertical-rl;
  background-color: var(--xapp-form-widget-side-button-background-color, #d8412a);
  color: var(--xapp-form-widget-side-button-color, #ffffff);
  font-size: var(--xapp-form-widget-side-button-font-size, 1.5em);
  font-family: var(--xapp-form-widget-side-button-font-family, var(--xapp-form-widget-font-family, RobotoRegular, serif));
  top: var(--xapp-form-widget-side-button-top, 50%);
  min-height: var(--xapp-form-widget-side-button-min-length, 200px);
  box-shadow: var(--xapp-form-widget-box-shadow, 0 4px 24px rgba(0, 0, 0, 0.12));
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 150ms ease-in-out;
}
.SideButton-module_xapp_form_sticky_button__YqORL:hover {
  background-color: var(--xapp-form-widget-side-button-background-color-dark, darkred);
  box-shadow: var(--xapp-form-widget-box-shadow-hover, 0 6px 32px rgba(0, 0, 0, 0.16));
}
.SideButton-module_xapp_form_sticky_button__YqORL:active {
  transform: translateY(-50%) scale(0.98);
}
.SideButton-module_xapp_form_sticky_button__YqORL:focus {
  outline: none;
}
.SideButton-module_xapp_form_sticky_button__YqORL:focus-visible {
  outline: 2px solid var(--xapp-form-widget-focus-ring-color, var(--xapp-form-widget-header-background-color, #012b54));
  outline-offset: 0px;
}
.SideButton-module_xapp_form_sticky_button__YqORL.SideButton-module_left__GT6z8 {
  left: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  padding: 20px 20px 20px 10px;
}
.SideButton-module_xapp_form_sticky_button__YqORL.SideButton-module_right__Hy2FU {
  right: 0;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  padding: 20px 10px 20px 20px;
  transform: translateY(-50%) rotate(180deg);
}
.SideButton-module_xapp_form_sticky_button__YqORL.SideButton-module_right__Hy2FU:active {
  transform: translateY(-50%) rotate(180deg) scale(0.98);
}
@font-face {
  font-family: RobotoRegular;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format("woff2");
}
.Form-module_xapp_form__mMqzX {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif);
}
.Form-module_xapp_form__mMqzX .MuiTypography-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiButton-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiButtonBase-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX button {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiInputBase-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiInputBase-input {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiTextField-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiInputLabel-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiFormHelperText-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiFilledInput-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiFilledInput-input {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiChip-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiChip-label {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiAutocomplete-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiAutocomplete-input {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiFormControl-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX .MuiFormControlLabel-root {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}
.Form-module_xapp_form__mMqzX [class*="Mui"]:not([class*="Portal"]) {
  font-family: var(--xapp-form-widget-font-family, RobotoRegular, serif) !important;
}