/* ============================================================
 * Asia Forms Theme — Scoped CSS
 * Convention: .cmp-af-asia-{component}__{element}--{modifier}
 * All selectors MUST be scoped under .cmp-adaptiveform-container
 * or a similarly specific parent to prevent site-level bleeding.
 * ============================================================ */

/*
 * AFCC field visibility enforcement
 *
 * The AEM Adaptive Forms Core Components runtime sets data-cmp-visible="false"
 * on fields that are hidden via rules (e.g. conditional show/hide driven by
 * radio buttons). The CSS rule that enforces this hidden state lives in:
 *   core/fd/af-clientlibs/core-forms-components-runtime-all.css
 *
 * That clientlib is included by the default manulife/components/structure/page
 * page component but is NOT loaded by the manulife-asia/components/structure/page
 * component (the asia template). Without this rule, fields with
 * data-cmp-visible="false" render visibly on asia-template pages even though
 * AFCC's JavaScript model correctly marks them as hidden.
 *
 * This rule mirrors the upstream definition exactly so that conditional fields
 * behave identically on all templates. The :not(.cmp-adaptiveform-container--edit)
 * guard preserves author-mode visibility so editors can still see all fields.
 */
form.cmp-adaptiveform-container:not(.cmp-adaptiveform-container--edit) [data-cmp-visible="false"] {
  display: none;
}

/* Collapse the outer .aem-GridColumn slot when its AF field is hidden, so the
 * slot does not leave an empty gap in the wrapper grid.
 */
form.cmp-adaptiveform-container:not(.cmp-adaptiveform-container--edit)
  .cmp-adaptiveform-container__wrapper
  > .aem-GridColumn[data-cmp-visible="false"] {
  display: none;
}

form.cmp-adaptiveform-container:not(.cmp-adaptiveform-container--edit)
  .cmp-adaptiveform-container__wrapper
  > .aem-GridColumn:has(> [data-cmp-visible="false"]) {
  display: none;
}

/* In panel 2-column grids, collapse the direct grid item when AF marks the
 * field hidden so the sibling column can reflow left without leaving a hole.
*/
form.cmp-adaptiveform-container:not(.cmp-adaptiveform-container--edit)
  div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > :not(.cmp-container__label-container)[data-cmp-visible="false"] {
  display: none;
}

form.cmp-adaptiveform-container:not(.cmp-adaptiveform-container--edit)
  div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > :not(.cmp-container__label-container):has(> [data-cmp-visible="false"]) {
  display: none;
}

/* [H-6 REMOVED] .cmp-experiencefragment--header font-family — belongs in site CSS, not forms theme */

/* [C-3 REMOVED] Global container reset (:not(.cmp-adaptiveform-container) > .cmp-container) — deleted to prevent site-level bleeding */

/*
 * Neutralize Adobe Forms runtime theme.css bleeding
 * The form embed loads _default/theme.css which sets:
 *   html, body { color: #666; font-family: "Helvetica Neue"...; font-size: 1rem }
 *   .cmp-container { color: #666; margin: 0.25rem 0; font-size: 1rem; }
 *   .cmp-title__text { color: #666; font-size: 1.5rem; font-weight: 400; }
 *   .cmp-image { margin: 0.25rem 0; }
 * These are GLOBAL selectors that bleed into all site components.
 * Reset them to restore site-level values.
 *
 * NOTE: FormEmbedClientLibFilter now strips the _default/theme.css <link>
 * tag at the source, so the Canvas theme no longer loads on the host page.
 * These CSS overrides remain as a safety net for edge cases where the filter
 * is bypassed (e.g. iframe embed, dispatcher-cached markup, or non-Asia
 * template pages). A :has(link[...]) guard would not work here because the
 * filter removes the <link> server-side before CSS evaluation.
 */

/* Reset body-level overrides from forms _default/theme.css */
html,
body.cmp-page {
  color: initial;
  font-family: var(--font-sans, "Manulife JH Sans", Helvetica, Arial, sans-serif);
  font-size: initial;
}

.cmp-page > .cmp-container,
.cmp-page > .cmp-container .cmp-container:not(.cmp-adaptiveform-container .cmp-container) {
  color: unset;
  margin: 0;
  font-size: unset;
}

/* Reset .cmp-image margin outside form scope */
.cmp-page .cmp-image:not(.cmp-adaptiveform-container .cmp-image) {
  margin: 0;
}

/* Reset .cmp-title__text outside form scope */
.cmp-page .cmp-title__text:not(.cmp-adaptiveform-container .cmp-title__text) {
  color: unset;
  font-size: unset;
  font-weight: unset;
}

/* [GSF-16456] Form heading ("Join us now") — design specs */
.cmp-adaptiveform-container .cmp-title__text {
  font-family: var(--font-sans);
  font-size: var(--gem-font-size-1200, 1.625rem);
  font-weight: var(--gem-font-weight-demibold, 600);
  line-height: var(--gem-line-height-900, 2rem);
  color: var(--gem-color-text-default, #282b3e);
  margin: 0;
}

/*
 * Form container padding & margin
 * Canvas _default/theme.css is stripped by FormEmbedClientLibFilter, so we
 * must provide the layout spacing that Canvas previously supplied.
 * Original Canvas values: padding: 0 20px; wrapper margin: 0 auto 20px.
 * We add 40px bottom padding for form breathing room and set wrapper
 * bottom-margin to 0 to avoid a gap before the footer.
 */
.cmp-container.cmp-adaptiveform-container {
  padding: 0 20px 40px;
}
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* When the AFCC form is embedded inside a Form Tabs (dropdown variant), the
 * form-tabs wrapper already provides the outer horizontal layout — the 20px
 * inset above would push the form fields to the right of the dropdown row,
 * misaligning them with the Prefix text and <select>. Zero the horizontal
 * padding so the form fields always sit flush with the dropdown row above.
 * Bottom padding is preserved for breathing room above the footer. Applies
 * whether or not a Prefix is authored. */
.cmp-tabs--dropdown .cmp-container.cmp-adaptiveform-container {
  padding-left: 0;
  padding-right: 0;
}

/* [GSF-16456] Mobile 320px: symmetric 16px margins per design.
 * The section container (parent) provides horizontal padding via Tailwind
 * px-4 (16px). The form container zeroes its own horizontal padding so
 * the parent is the sole source of side spacing — total 16px per side.
 * Wrapper horizontal padding also zeroed to prevent stacking. */
@media (max-width: 767px) {
  .cmp-container.cmp-adaptiveform-container {
    padding: 0 0 40px;
  }
  .cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper {
    padding: 10px 0;
  }
}

/* [GSF-18583] Zero field-wrapper horizontal padding across all viewports so the
 * section container is the sole source of side spacing.
 * Mono forms theme applies padding-left/right: var(--spacing-3) (12px) on
 * .panelcontainer .textinput.base, .dropdown.base, .checkbox.base, etc.
 * and on .cmp-adaptiveform-container__wrapper.aem-Grid > .aem-GridColumn.
 * These stack with the section container padding at all breakpoints. Reset
 * them to 0 here so only the section container controls horizontal spacing. */

.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper.aem-Grid > .aem-GridColumn,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .textinput.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .dropdown.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .datepicker.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .checkbox.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .checkboxgroup.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .radiobutton.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .fileinput.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .submit.button.base,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .aem-GridColumn.cmp-title,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .aem-GridColumn.cmp-text,
.cmp-adaptiveform-container .cmp-adaptiveform-container__wrapper .panelcontainer .text.base {
  padding-left: 0;
  padding-right: 0;
}

/* Reset only form field elements — not embedded text/richtext/XF components */
.cmp-adaptiveform-container .cmp-adaptiveform-textinput,
.cmp-adaptiveform-container .cmp-adaptiveform-dropdown,
.cmp-adaptiveform-container .cmp-adaptiveform-datepicker,
.cmp-adaptiveform-container .cmp-adaptiveform-checkbox,
.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup,
.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton,
.cmp-adaptiveform-container .cmp-adaptiveform-button,
.cmp-adaptiveform-container .cmp-adaptiveform-fileinput {
  color: unset;
  font-family: unset;
  font-size: unset;
}

.cmp-adaptiveform-container div.panelcontainer > .cmp-container:not(:has(> .aem-Grid)) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 24px;
}

/* Prevent 1fr tracks from expanding to min-content. Without this, a long label or
 * a widget with min-width forces the column wider than the container, causing overflow
 * and hiding the text-overflow:ellipsis on dropdown values off-screen. */
.cmp-adaptiveform-container div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > * {
  min-width: 0;
}

.cmp-adaptiveform-container div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > .cmp-container__label-container {
  grid-column: 1 / -1;
}

/* [GSF-20620] Nested panelcontainers (e.g. FileUpload wrapper) span full width */
.cmp-adaptiveform-container div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > .panelcontainer {
  grid-column: 1 / -1;
  margin-bottom: var(--gem-spacing-2-5, 0.625rem);
}

/* [GSF-16456] Breakpoint harmonized to 767px to match form container media query */
@media (max-width: 767px) {
  .cmp-adaptiveform-container div.panelcontainer > .cmp-container:not(:has(> .aem-Grid)) {
    grid-template-columns: 1fr;
  }
}

.cmp-adaptiveform-container div.panelcontainer > .cmp-container:has(> .aem-Grid) {
  margin-top: 0;
}

.cmp-adaptiveform-container div.panelcontainer > .cmp-container > .aem-Grid > .aem-GridColumn {
  padding-right: 8px;
  box-sizing: border-box;
}

.cmp-adaptiveform-container div.panelcontainer > .cmp-container > .aem-Grid > .aem-GridColumn:last-child {
  padding-right: 0;
}

/* [GSF-16456] Mobile: remove GridColumn right padding (single-column layout) */
@media (max-width: 767px) {
  .cmp-adaptiveform-container div.panelcontainer > .cmp-container > .aem-Grid > .aem-GridColumn {
    padding-right: 0;
  }
}

/* Ensure embedded GDS accordion uses full-width layout in Adaptive Forms. */
/* [GSF-13295] Accordion spacing within Adaptive Forms:
 * - 10px top gap from any preceding component adding the gap to the accordion itself (not the wrapper)
 * to make it 24px due to the 14px padding of the form container wrapper
 * - 24px bottom gap to any following component
 * Scoped under .cmp-adaptiveform-container — no effect on site-level accordions.
 */
.cmp-adaptiveform-container .cmp-gds-accordion {
  width: 100%;
  margin-top: var(--gem-spacing-2-5, 0.625rem);
  margin-bottom: var(--gem-spacing-5, 1.5rem);
}

/* No orphan spacing when accordion is the first or last item in its container */
.cmp-adaptiveform-container .cmp-gds-accordion:first-child {
  margin-top: 0;
}

.cmp-adaptiveform-container .cmp-gds-accordion:last-child {
  margin-bottom: 0;
}

/* [GSF-13295] Mobile override: 30px top gap on narrow viewports (320px–767px)
 * (26px margin + 14px wrapper padding = 40px effective visual gap) */
@media (min-width: 320px) and (max-width: 767px) {
  .cmp-adaptiveform-container .cmp-gds-accordion {
    margin-top: 26px;
  }
}

.cmp-adaptiveform-container .cmp-gds-accordion > content-accordion {
  display: block;
  width: 100%;
}

/* 
 * Tailwind Advanced Selector Protection
 * Uses high specificity to override core forms CSS
 * Protects Tailwind's advanced selectors used by manulife-mono components
 */

/* Protect [&_img]:object-cover selectors with high specificity */
.aem-Grid .cmp-teaser [class*="[&_img]:object-cover"] img,
.aem-Grid div[class*="[&_img]:object-cover"] img,
.responsivegrid [class*="[&_img]:object-cover"] img {
  object-fit: cover;
}

/* Protect [&_img]:h-full selectors */
.aem-Grid .cmp-teaser [class*="[&_img]:h-full"] img,
.aem-Grid div[class*="[&_img]:h-full"] img,
.responsivegrid [class*="[&_img]:h-full"] img {
  height: 100%;
}

/* Protect [&_img]:w-full selectors */
.aem-Grid .cmp-teaser [class*="[&_img]:w-full"] img,
.aem-Grid div[class*="[&_img]:w-full"] img,
.responsivegrid [class*="[&_img]:w-full"] img {
  width: 100%;
}

/* Protect [&_.cmp-image]:h-full selectors */
.aem-Grid .cmp-teaser [class*="[&_.cmp-image]:h-full"] .cmp-image,
.aem-Grid div[class*="[&_.cmp-image]:h-full"] .cmp-image,
.responsivegrid [class*="[&_.cmp-image]:h-full"] .cmp-image {
  height: 100%;
}

/* Protect [&_div]:absolute and [&_div]:inset-0 selectors */
.aem-Grid [class*="[&_div]:absolute"] div,
.responsivegrid [class*="[&_div]:absolute"] div {
  position: absolute;
}

.cmp-adaptiveform .aem-Grid [class*="[&_div]:inset-0"] div,
.cmp-adaptiveform .responsivegrid [class*="[&_div]:inset-0"] div,
.cmp-adaptiveform [class*="[&_div]:inset-0"] div {
  inset: 0;
}
/* Specific protection for promotion component responsive patterns */
.cmp-adaptiveform
  .aem-Grid
  .cmp-teaser
  [class*="sm:absolute"][class*="sm:inset-0"],
.cmp-adaptiveform
  .responsivegrid
  .cmp-teaser
  [class*="sm:absolute"][class*="sm:inset-0"],
.cmp-adaptiveform .cmp-teaser [class*="sm:absolute"][class*="sm:inset-0"] {
  position: static;
}
@media (min-width: 640px) {
  .cmp-adaptiveform
    .aem-Grid
    .cmp-teaser
    [class*="sm:absolute"][class*="sm:inset-0"],
  .cmp-adaptiveform
    .responsivegrid
    .cmp-teaser
    [class*="sm:absolute"][class*="sm:inset-0"],
  .cmp-adaptiveform .cmp-teaser [class*="sm:absolute"][class*="sm:inset-0"] {
    position: absolute;
    inset: 0;
  }
}
/* Protect object positioning */
.cmp-adaptiveform .aem-Grid [class*="[&_img]:object-center"] img,
.cmp-adaptiveform .responsivegrid [class*="[&_img]:object-center"] img,
.cmp-adaptiveform [class*="[&_img]:object-center"] img {
  object-position: center;
}

/* Typography defaults for text components inside form containers */
.cmp-adaptiveform-container .cmp-text,
.cmp-adaptiveform-container .enhanced-text,
.cmp-adaptiveform-container .rich-text,
.cmp-adaptiveform-container .manulife-asia-richtext,
.cmp-adaptiveform-container .richtext-component {
  font-family: "Manulife JH Sans", Helvetica, Arial, sans-serif;
}

.cmp-adaptiveform-container .cmp-sectioncontainer {
  font-family: "Manulife JH Sans", Helvetica, Arial, sans-serif;
}

.cmp-adaptiveform-container .cmp-categories {
  font-family:
    "Manulife JH Sans Optimized", "Manulife JH Sans", Helvetica, Arial,
    sans-serif;
}

/* Protect aspect ratio and border properties */
.aem-Grid [class*="[&_img]:aspect-"] img,
.responsivegrid [class*="[&_img]:aspect-"] img {
  aspect-ratio: inherit;
}

.aem-Grid [class*="[&_img]:border"] img,
.aem-Grid [class*="[&_img]:rounded"] img,
.responsivegrid [class*="[&_img]:border"] img,
.responsivegrid [class*="[&_img]:rounded"] img {
  border: inherit;
  border-radius: inherit;
}

/* ── Global link color ── */
.cmp-adaptiveform-container a,
.cmp-adaptiveform-container a:visited {
  color: #06874e;
  text-decoration: underline;
}

.cmp-adaptiveform-button .cmp-adaptiveform-button__widget {
  font-family: var(--font-sans, "Manulife JH Sans", Helvetica, Arial, sans-serif);
  cursor: pointer;
  color: var(--gem-color-neutral-00);
  letter-spacing: 0;
  background-color: var(--gem-color-red-600);
  border: none;
  border-radius: 0;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 12px;
  font-size: var(--gem-font-size-400);
  font-weight: var(--gem-font-weight-bold);
  line-height: var(--gem-line-height-600);
  display: flex;
  min-width: 200px;
  height: 48px;
}

.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:hover {
  background-color: var(--gem-color-red-800);
  outline: none;
}

.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:focus,
.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:active {
  background-color: var(--gem-color-red-900);
  outline: none;
}

.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:disabled {
  background-color: var(--gem-color-neutral-200);
}

.cmp-adaptiveform-button
  [data-cmp-enabled]:not([data-cmp-enabled="true"])
  .cmp-adaptiveform-button__widget {
  color: #e6e6e6;
  background-color: #888888;
}

/* [mobile] Submit button v1: scale to full container width on mobile.
 * The desktop rule (min-width: 200px) causes overflow on narrow viewports.
 * Scoped under .cmp-adaptiveform-container — no site-level bleed. */
@media (max-width: 767px) {
  .cmp-adaptiveform-container .cmp-adaptiveform-button .cmp-adaptiveform-button__widget {
    min-width: 0;
    width: 100%;
  }
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__widget {
  font-family: var(--font-sans);
  color: #282b3e;
  letter-spacing: 0;
  border: none;
  border-radius: 0;
  height: 48px;
  width: 100%;
  margin-top: var(--gem-spacing-2);
  padding: 0 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M10 13.4 6 9.5 7.5 8l2.5 2.6L12.5 8 14 9.5z' fill='currentColor'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__label-container {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: #282b3e;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  display: flex;
  width: 100%;
}

/* Allow long dropdown labels to wrap. Specificity (0,5,0) beats clientlib-site-css (0,4,1)
 * which sets flex:0 0 auto/flex-shrink:0 on the label, preventing wrapping.
 * flex-shrink:1 is needed alongside white-space:normal to allow shrinking. */
.cmp-adaptiveform-container.cmp-container
  .cmp-adaptiveform-dropdown
  .cmp-adaptiveform-dropdown__label-container
  .cmp-adaptiveform-dropdown__label {
  white-space: normal;
  flex-shrink: 1;
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__widget:hover {
  background-color: #fff;
  outline: 2px solid #34384b;
  border: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__widget:focus,
.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__widget:active {
  background-color: #fff;
  outline: 2px solid #06874e;
  border: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__widget:disabled {
  background-color: #ededed;
  border: 1px solid #8e90a2;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-dropdown__widget[aria-invalid="true"] {
  background-color: #fef3f3;
  border: 2px solid #db1f00;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-dropdown__widget[aria-invalid="true"]:focus,
.cmp-adaptiveform-container
  .cmp-adaptiveform-dropdown__widget[aria-invalid="true"]:active {
  background-color: #fff;
  border: 2px solid #06874e;
  outline: none;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-dropdown__widget[aria-invalid="true"]:hover {
  background-color: #fff;
  border: 2px solid #34384b;
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__errormessage {
  font-family: var(--font-sans);
  color: #db1f00;
  letter-spacing: 0;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-dropdown__widget[aria-invalid="true"]
  + .cmp-adaptiveform-dropdown__errormessage:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #db1f00;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown[data-cmp-valid="false"],
.cmp-adaptiveform-container .cmp-adaptiveform-dropdown[data-cmp-valid="true"] {
  border: none;
  border-inline-start-width: none;
  -webkit-padding-start: none;
  background: 0 0;
  padding-inline-start: none;
}

/* ── Date Picker ── */
.cmp-adaptiveform-container .cmp-adaptiveform-datepicker {
  margin: 0;
}

/* Hide native calendar icon; transparent overlay keeps it clickable on Chromium/WebKit */
.cmp-adaptiveform-datepicker__widget::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0;
  width: 44px;
  height: 100%;
  cursor: pointer;
}

.cmp-adaptiveform-container .cmp-adaptiveform-datepicker__label-container {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: #282b3e;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  display: flex;
}

.cmp-adaptiveform-container .cmp-adaptiveform-datepicker__widget {
  font-family: var(--font-sans);
  color: #282b3e;
  letter-spacing: 0;
  border: 1px solid #8e90a2;
  border-radius: 0;
  height: 48px;
  width: 100%;
  min-width: 260px;
  margin-top: var(--gem-spacing-2);
  padding: 0 48px 0 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M44.18 10.022V3h-5.017v7.022H20.837V3H15.82v7.022H6.428V57h47.145V10.022Zm4.375 41.96h-37.11V26.329h37.11Zm0-30.672h-37.11V15.04h37.11Z' fill='%23282b3e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-datepicker__widget:hover {
  background-color: #fff;
  border: 2px solid #34384b;
}

.cmp-adaptiveform-container .cmp-adaptiveform-datepicker__widget:focus,
.cmp-adaptiveform-container .cmp-adaptiveform-datepicker__widget:active {
  background-color: #fff;
  border: 2px solid #06874e;
  outline: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-datepicker__widget:disabled {
  background-color: #ededed;
  border: 1px solid #8e90a2;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker__widget[aria-invalid="true"] {
  background-color: #fef3f3;
  border: 2px solid #db1f00;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker__widget[aria-invalid="true"]:focus,
.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker__widget[aria-invalid="true"]:active {
  background-color: #fff;
  border: 2px solid #06874e;
  outline: none;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker__widget[aria-invalid="true"]:hover {
  background-color: #fff;
  border: 2px solid #34384b;
}

.cmp-adaptiveform-container .cmp-adaptiveform-datepicker__errormessage {
  font-family: var(--font-sans);
  color: #db1f00;
  letter-spacing: 0;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker__widget[aria-invalid="true"]
  + .cmp-adaptiveform-datepicker__errormessage:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #db1f00;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker[data-cmp-valid="false"],
.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker[data-cmp-valid="true"] {
  border: none;
  border-inline-start-width: none;
  -webkit-padding-start: none;
  background: 0 0;
  padding-inline-start: none;
}

/* 
DISABLED: This CSS was interfering with text components
.cmp-adaptiveform-text {
    font-family: var(--font-sans);
    color: #282b3e;
    margin: 0;
    font-size: 18px;
}
*/

.cmp-adaptiveform-container .cmp-adaptiveform-text a {
  font-family: var(--font-sans);
  color: #06874e;
  text-decoration: underline;
}

.cmp-adaptiveform-container .cmp-adaptiveform-text a:active {
  color: #046138;
}

.cmp-adaptiveform-textinput {
  flex-direction: column;
  margin: 0;
  display: flex;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__label-container {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: #282b3e;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  display: flex;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__widget {
  font-family: var(--font-sans);
  color: #282b3e;
  background-color: #fff;
  border: 1px solid #8e90a2;
  border-radius: 0;
  height: 48px;
  margin-top: var(--gem-spacing-2);
  padding: 0 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  min-width: 260px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__widget:hover {
  background-color: #fff;
  border: 2px solid #34384b;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__widget:focus,
.cmp-adaptiveform-container .cmp-adaptiveform-textinput__widget:active {
  background-color: #fff;
  border: 2px solid #06874e;
  outline: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__widget:disabled {
  background-color: #ededed;
  border: 1px solid #8e90a2;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-textinput__widget[aria-invalid="true"] {
  background-color: #fef3f3;
  border: 2px solid #db1f00;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-textinput__widget[aria-invalid="true"]:focus,
.cmp-adaptiveform-container
  .cmp-adaptiveform-textinput__widget[aria-invalid="true"]:active {
  background-color: #fff;
  border: 2px solid #06874e;
  outline: none;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-textinput__widget[aria-invalid="true"]:hover {
  background-color: #fff;
  border: 2px solid #34384b;
}

.cmp-adaptiveform-container textarea.cmp-adaptiveform-textinput__widget {
  min-height: 96px;
  min-width: 260px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__longdescription {
  color: #666;
  background-color: #e6e6e6;
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 10px;
  font-size: 0.875rem;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__longdescription p {
  margin: 0;
  padding: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__shortdescription {
  margin-top: 10px;
  font-size: 0.875rem;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__questionmark {
  cursor: pointer;
  background:
    url(clientlib-forms-theme/css/resources/images/question.svg) 50% / cover no-repeat,
    #969696;
  border-radius: 9px;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  position: absolute;
  right: 20px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__label-container
  .cmp-adaptiveform-textinput__questionmark {
  position: unset;
  right: unset;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput__errormessage {
  font-family: var(--font-sans);
  color: #db1f00;
  letter-spacing: 0;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-textinput__widget[aria-invalid="true"]
  + .cmp-adaptiveform-textinput__errormessage:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #db1f00;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-textinput[data-cmp-valid="false"],
.cmp-adaptiveform-container .cmp-adaptiveform-textinput[data-cmp-valid="true"] {
  border: none;
  border-inline-start-width: none;
  -webkit-padding-start: none;
  background: 0 0;
  padding-inline-start: none;
}

/* ── Standalone Checkbox ── */
.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__widget {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__label {
  font-family: var(--font-sans);
  color: #282b3e;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: block;
  cursor: pointer;
  position: relative;
  padding-left: 36px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__label p,
.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__label div {
  margin: 0;
  padding: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__label > p > a,
.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__label > p > a > u {
  text-decoration: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border: 2px solid #8e90a2;
  box-sizing: border-box;
  flex-shrink: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background-color: transparent;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M8.8 11 6.9 9.1l-1.2 1.2 3 3 5.6-5.6-1.2-1.2z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: 85%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M8.8 11 6.9 9.1l-1.2 1.2 3 3 5.6-5.6-1.2-1.2z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: 85%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  pointer-events: none;
}

/* [GSF-16456] Checkbox focus state — square outline around checkbox per GDS */
.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__widget:focus-visible
  + .cmp-adaptiveform-checkbox__label::before {
  outline: 2px solid var(--gem-color-border-primary, #06874e);
  outline-offset: 2px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__widget:checked
  + .cmp-adaptiveform-checkbox__label::before {
  border-color: var(--gem-color-border-primary, #06874e);
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__widget:checked
  + .cmp-adaptiveform-checkbox__label::after {
  background-color: var(--gem-color-border-primary, #06874e);
}

/* [GSF-16456] Checkbox checked: text becomes demibold */
.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__widget:checked
  + .cmp-adaptiveform-checkbox__label {
  font-weight: var(--gem-font-weight-demibold, 600);
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox__errormessage {
  font-family: var(--font-sans);
  color: #db1f00;
  letter-spacing: 0;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-checkbox[data-cmp-valid="false"]
  .cmp-adaptiveform-checkbox__errormessage:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #db1f00;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkbox[data-cmp-valid="false"],
.cmp-adaptiveform-container .cmp-adaptiveform-checkbox[data-cmp-valid="true"] {
  border: none;
  border-inline-start-width: none;
  -webkit-padding-start: none;
  background: 0 0;
  padding-inline-start: none;
}

/* ── Checkbox Group ── */
.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__label,
.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__label-container {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: #282b3e;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option__widget {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  outline: none;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label {
  font-family: var(--font-sans);
  color: #282b3e;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label p,
.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label div {
  margin: 0;
  padding: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border: 2px solid #8e90a2;
  box-sizing: border-box;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background-color: transparent;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M8.8 11 6.9 9.1l-1.2 1.2 3 3 5.6-5.6-1.2-1.2z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: 85%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M8.8 11 6.9 9.1l-1.2 1.2 3 3 5.6-5.6-1.2-1.2z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: 85%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  pointer-events: none;
}

/* [GSF-16456] Checkbox group focus state — square outline per GDS */
.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label:focus-within::before {
  outline: 2px solid var(--gem-color-border-primary, #06874e);
  outline-offset: 2px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label:has(
    .cmp-adaptiveform-checkboxgroup__option__widget:checked
  )::before {
  border-color: var(--gem-color-border-primary, #06874e);
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label:has(
    .cmp-adaptiveform-checkboxgroup__option__widget:checked
  )::after {
  background-color: var(--gem-color-border-primary, #06874e);
}

/* [GSF-16456] Checkbox group: text becomes demibold when checked */
.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__option-label:has(
    .cmp-adaptiveform-checkboxgroup__option__widget:checked
  ) {
  font-weight: var(--gem-font-weight-demibold, 600);
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-checkboxgroup[data-cmp-valid="false"],
.cmp-adaptiveform-container
  .cmp-adaptiveform-checkboxgroup[data-cmp-valid="true"] {
  border: none;
  border-inline-start-width: none;
  -webkit-padding-start: none;
  background: 0 0;
  padding-inline-start: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-checkboxgroup__errormessage {
  font-family: var(--font-sans);
  color: #db1f00;
  letter-spacing: 0;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-checkboxgroup[data-cmp-valid="false"]
  .cmp-adaptiveform-checkboxgroup__errormessage:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #db1f00;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0;
}

/* ── Radio button ── */
.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__label,
.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__label-container {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: #282b3e;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option__widget {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
  outline: none;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label {
  font-family: var(--font-sans);
  color: #282b3e;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label p,
.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label div {
  margin: 0;
  padding: 0;
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border: 2px solid #8e90a2;
  border-radius: 50%;
  box-sizing: border-box;
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background-color: transparent;
  border-radius: 50%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  pointer-events: none;
}

/* [GSF-16456] Radio button focus state — square outline per GDS.
 * Shows the hidden input's outline on focus. The input overlays the circle
 * with transparent background so the circular ::before remains visible
 * inside the square focus ring. High-specificity selector to override the
 * checked-state styles from the GDS RadioButton CSS without !important. */
.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label:focus-within
  > input[type="radio"].cmp-adaptiveform-radiobutton__option__widget {
  opacity: 1;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 28px;
  height: 28px;
  outline: 2px solid var(--gem-color-border-primary, #06874e);
  outline-offset: 2px;
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label:has(
    .cmp-adaptiveform-radiobutton__option__widget:checked
  )::before {
  border-color: var(--gem-color-border-primary, #06874e);
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__option-label:has(
    .cmp-adaptiveform-radiobutton__option__widget:checked
  )::after {
  background-color: var(--gem-color-border-primary, #06874e);
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-radiobutton[data-cmp-valid="false"],
.cmp-adaptiveform-container
  .cmp-adaptiveform-radiobutton[data-cmp-valid="true"] {
  border: none;
  border-inline-start-width: none;
  -webkit-padding-start: none;
  background: 0 0;
  padding-inline-start: none;
}

.cmp-adaptiveform-container .cmp-adaptiveform-radiobutton__errormessage {
  font-family: var(--font-sans);
  color: #db1f00;
  letter-spacing: 0;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-radiobutton[data-cmp-valid="false"]
  .cmp-adaptiveform-radiobutton__errormessage:before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: #db1f00;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M27.5 21.684h5v14h-5zm0 16.027h5v5h-5z' fill='currentColor'/%3E%3Cpath d='M30 3.238 3 50h54zm0 10L48.339 45H11.661z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0;
}

.cmp-adaptiveform-radiobutton__widget.HORIZONTAL,
.cmp-adaptiveform-checkboxgroup__widget.HORIZONTAL {
  display: flex;
  flex-direction: row;
  gap: var(--gem-spacing-6);
  align-items: center;
  margin-top: var(--gem-spacing-2);
}

/* Mobile override: force HORIZONTAL radio/checkbox groups to stack vertically
 * on small viewports so options remain readable and tap-friendly regardless of
 * the authored orientation. */
@media (max-width: 767px) {
  .cmp-adaptiveform-radiobutton__widget.HORIZONTAL,
  .cmp-adaptiveform-checkboxgroup__widget.HORIZONTAL {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gem-spacing-3);
  }
}

.cmp-adaptiveform-radiobutton__widget.VERTICAL,
.cmp-adaptiveform-checkboxgroup__widget.VERTICAL {
  display: flex;
  flex-direction: column;
  gap: var(--gem-spacing-3);
  align-items: flex-start;
  margin-top: var(--gem-spacing-2);
}

/* Reduce radio/checkbox widget top spacing inside panel 2-column grid so
 * the label-to-widget gap matches text/dropdown fields (10px).
 * Without this override the gap is 20px (label margin-bottom 10px + widget
 * margin-top 10px). Setting widget margin-top to 0 yields a consistent 10px
 * gap from the label's own margin-bottom.
 * DOM path: panelcontainer > .cmp-container > .radiobutton.base > component > widget */
.cmp-adaptiveform-container div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > .radiobutton.base
  .cmp-adaptiveform-radiobutton__widget.HORIZONTAL,
.cmp-adaptiveform-container div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > .radiobutton.base
  .cmp-adaptiveform-radiobutton__widget.VERTICAL,
.cmp-adaptiveform-container div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > .checkboxgroup.base
  .cmp-adaptiveform-checkboxgroup__widget.HORIZONTAL,
.cmp-adaptiveform-container div.panelcontainer
  > .cmp-container:not(:has(> .aem-Grid))
  > .checkboxgroup.base
  .cmp-adaptiveform-checkboxgroup__widget.VERTICAL {
  margin-top: 0;
}

/* ── Form Container ── */
form.cmp-container > .cmp-adaptiveform-container__wrapper {
  display: grid;
  gap: 14px;
}

/* ── Submit Button ── */
.cmp-adaptiveform-button {
  margin-top: var(--gem-spacing-2);
}

/* ── Tabs Form ── */
.cmp-tabs--dropdown select.cmp-tabs__tablist,
.cmp-adaptiveform-container select.cmp-tabs__tablist {
  font-family: var(--font-sans);
  color: #282b3e;
  letter-spacing: 0;
  outline: 1px solid #8e90a2;
  border: none;
  border-radius: 0;
  height: 48px;
  width: 100%;
  margin-top: var(--gem-spacing-2);
  padding: 0 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M10 13.4 6 9.5 7.5 8l2.5 2.6L12.5 8 14 9.5z' fill='currentColor'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
}

.cmp-tabs--dropdown select.cmp-tabs__tablist:hover,
.cmp-adaptiveform-container select.cmp-tabs__tablist:hover {
  background-color: #fff;
  outline: 2px solid #34384b;
  border: none;
}

.cmp-tabs--dropdown select.cmp-tabs__tablist:focus,
.cmp-tabs--dropdown select.cmp-tabs__tablist:focus-visible,
.cmp-tabs--dropdown select.cmp-tabs__tablist:active,
.cmp-adaptiveform-container select.cmp-tabs__tablist:focus,
.cmp-adaptiveform-container select.cmp-tabs__tablist:focus-visible,
.cmp-adaptiveform-container select.cmp-tabs__tablist:active {
  background-color: #fff;
  outline: 2px solid #06874e;
  border: none;
}

.cmp-tabs--dropdown select.cmp-tabs__tablist:disabled,
.cmp-adaptiveform-container select.cmp-tabs__tablist:disabled {
  background-color: #ededed;
  border: 1px solid #8e90a2;
  outline: none;
}

/* Tabs-only custom dropdown: match AF dropdown sizing/states without
 * changing shared dropdown styles used by other form components. */
.cmp-tabs--dropdown .cmp-dropdown-custom,
.cmp-tabs--dropdown .cmp-adaptiveform-container .cmp-dropdown-custom {
  border: none;
  outline: 1px solid #8e90a2;
}

.cmp-tabs--dropdown .cmp-dropdown-custom:hover:not(.cmp-dropdown-custom--disabled):not(.cmp-dropdown-custom--open),
.cmp-tabs--dropdown .cmp-adaptiveform-container .cmp-dropdown-custom:hover:not(.cmp-dropdown-custom--disabled):not(.cmp-dropdown-custom--open) {
  outline: 2px solid #34384b;
  border: none;
}

.cmp-tabs--dropdown .cmp-dropdown-custom:focus,
.cmp-tabs--dropdown .cmp-dropdown-custom:focus-within,
.cmp-tabs--dropdown .cmp-dropdown-custom--open,
.cmp-tabs--dropdown .cmp-adaptiveform-container .cmp-dropdown-custom:focus,
.cmp-tabs--dropdown .cmp-adaptiveform-container .cmp-dropdown-custom:focus-within,
.cmp-tabs--dropdown .cmp-adaptiveform-container .cmp-dropdown-custom--open {
  outline: 2px solid #06874e;
  border: none;
}

.cmp-tabs--dropdown .cmp-dropdown-custom--disabled,
.cmp-tabs--dropdown .cmp-adaptiveform-container .cmp-dropdown-custom--disabled {
  border: 1px solid #8e90a2;
  outline: none;
}

/* Align form-tabs dropdown width with one field column in the form grid.
 * Avoids fixed 500px cap while keeping parity with fields below. */
.cmp-tabs--dropdown .max-w-\[500px\] {
  width: 100%;
  max-width: calc((100% - 24px) / 2);
}

@media (max-width: 767px) {
  .cmp-tabs--dropdown .max-w-\[500px\] {
    max-width: 100%;
  }
}

/* [GSF-16456] Removed mobile label font-size reduction — labels stay at
 * var(--gem-font-size-600) (18px) across all breakpoints per design spec.
 * Previously set to 14px which contradicted design. */

/* ── Custom ARIA Dropdown (replaces native <select> open UI) ── */
.cmp-adaptiveform-container .cmp-dropdown-custom {
  position: relative;
  height: 48px;
  width: 100%;
  margin-top: var(--gem-spacing-2);
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--gem-color-neutral-700, #8e90a2);
  background-color: var(--gem-color-surface-default, #ffffff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M10 13.4 6 9.5 7.5 8l2.5 2.6L12.5 8 14 9.5z' fill='%23282B3E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
  border-radius: 0;
  outline: none;
}

.cmp-adaptiveform-container .cmp-dropdown-custom:focus,
.cmp-adaptiveform-container .cmp-dropdown-custom:focus-within {
  border: 2px solid var(--gem-color-border-status-success, #06874e);
  background-color: var(--gem-color-surface-default, #ffffff);
  outline: none;
}

.cmp-adaptiveform-container .cmp-dropdown-custom:hover:not(.cmp-dropdown-custom--disabled):not(.cmp-dropdown-custom--open) {
  border: 2px solid var(--gem-color-neutral-1000, #1e2530);
  background-color: var(--gem-color-surface-default, #ffffff);
}

.cmp-adaptiveform-container .cmp-dropdown-custom--open {
  border: 2px solid var(--gem-color-border-status-success, #06874e);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M10 6.6 14 10.5 12.5 12 10 9.4 7.5 12 6 10.5z' fill='%23282B3E'/%3E%3C/svg%3E");
}

.cmp-adaptiveform-container .cmp-dropdown-custom--disabled {
  background-color: var(--gem-color-surface-disabled, #ededed);
  cursor: default;
  border: 1px solid var(--gem-color-neutral-700, #8e90a2);
}

.cmp-adaptiveform-container .cmp-dropdown-custom__trigger {
  height: 100%;
  display: block;
  line-height: var(--gem-line-height-7xl, 48px);
  padding: 0 40px 0 12px;
  font-family: var(--font-sans);
  font-size: var(--gem-font-size-base, 1rem);
  font-weight: var(--gem-font-weight-regular, 400);
  letter-spacing: 0;
  color: var(--gem-color-neutral-dark-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.cmp-adaptiveform-container .cmp-dropdown-custom__list {
  position: absolute;
  top: 100%;
  left: -2px;
  right: -2px;
  z-index: 9999;
  margin: 0;
  padding: 0;
  background: var(--gem-color-surface-default, #ffffff);
  border: 1px solid var(--gem-color-neutral-700, #8e90a2);
  border-top: none;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  box-sizing: border-box;
}

.cmp-adaptiveform-container .cmp-dropdown-custom__option {
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--gem-font-size-base, 1rem);
  font-weight: var(--gem-font-weight-regular, 400);
  line-height: var(--gem-line-height-xl, 1.5rem);
  color: var(--gem-color-neutral-dark-default);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -0.5px 0 0 var(--gem-color-neutral-dark-light-4, #8e90a2) inset;
}

.cmp-adaptiveform-container .cmp-dropdown-custom__option:hover,
.cmp-adaptiveform-container .cmp-dropdown-custom__option[data-focused="true"] {
  background: var(--gem-color-surface-default-hover, #f5f5f5);
  box-shadow: inset 0 0 0 2px var(--gem-color-border-status-success, #06874e);
}

.cmp-adaptiveform-container .cmp-dropdown-custom__option--selected {
  background: var(--gem-color-surface-default, #ffffff);
  box-shadow: inset 3px 0 0 var(--gem-color-border-status-success, #06874e), 0 -0.5px 0 0 var(--gem-color-neutral-dark-light-4, #8e90a2) inset;
}

.cmp-adaptiveform-container .cmp-dropdown-custom__option--selected::after {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 8px;
  background-color: var(--gem-color-neutral-dark-default, #282b3e);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M8.8 11 6.9 9.1l-1.2 1.2 3 3 5.6-5.6-1.2-1.2z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 20 20'%3E%3Cpath d='M8.8 11 6.9 9.1l-1.2 1.2 3 3 5.6-5.6-1.2-1.2z' fill='currentColor'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.cmp-adaptiveform-container .cmp-dropdown-custom__option--selected:hover,
.cmp-adaptiveform-container .cmp-dropdown-custom__option--selected[data-focused="true"] {
  background: var(--gem-color-surface-default-hover, #f5f5f5);
  box-shadow: inset 0 0 0 2px var(--gem-color-border-status-success, #06874e);
}

.cmp-adaptiveform-container .cmp-dropdown-custom--invalid {
  background-color: #fef3f3;
  border: 2px solid var(--gem-color-border-status-error);
  outline: none;
}

.cmp-adaptiveform-container .cmp-dropdown-custom--invalid:hover:not(.cmp-dropdown-custom--open) {
  background-color: var(--gem-color-surface-default, #ffffff);
  border-color: var(--gem-color-border-inverse-surface);
}

.cmp-adaptiveform-container .cmp-dropdown-custom--invalid:focus,
.cmp-adaptiveform-container .cmp-dropdown-custom--invalid:focus-within,
.cmp-adaptiveform-container .cmp-dropdown-custom--invalid.cmp-dropdown-custom--open {
  background-color: var(--gem-color-surface-default, #ffffff);
  border-color: var(--gem-color-neutral-1000, #1e2530);
  outline: none;
}
/* ============================================================
 * OTP Modal — Sites-Embedded Forms (GDS Modal variant)
 * Convention: .cmp-af-asia-{component}__{element}--{modifier}
 * All selectors scoped under .cmp-adaptiveform-modal or
 * .gds-Modal.cmp-adaptiveform-modal to prevent bleeding.
 * ============================================================ */

.cmp-adaptiveform-modal {
    display: flex;
    overflow: hidden;
}

.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Content {
    padding: 0;
}

.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Container {
    padding: 0;
}

.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Footer-Actions {
    padding: var(--gem-spacing-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gem-spacing-3);
    justify-content: flex-end;
}

/* DIG-1654: Ensure modal buttons render at proper size on tablet */
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Footer-Actions gds-button {
    min-width: 160px;
    --button-padding-x: var(--gem-spacing-8, 32px);
}
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Footer-Actions gds-button::part(button),
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Footer-Actions gds-button button,
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Footer-Actions > button {
    min-width: 160px;
    padding-left: var(--gem-spacing-8, 32px);
    padding-right: var(--gem-spacing-8, 32px);
    font-weight: 600;
    white-space: nowrap;
}


.cmp-adaptiveform-modal .cmp-container.cmp-adaptiveform-modal__body,
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-Content [data-otp-body="true"],
.cmp-adaptiveform-modal [data-otp-body="true"] {
    margin: auto;
    background: var(--gem-color-neutral-00, #fff);
    padding: var(--gem-spacing-6) var(--gem-spacing-4);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--gem-spacing-4);
    flex-wrap: wrap;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.cmp-adaptiveform-modal--closed {
        display: none;
        height: 0vh;
        z-index: 0;
    }
    .cmp-adaptiveform-modal--open { 
        position: fixed;
        height: 100vh;
        background: var(--background-image-hero-overlay);
        inset: 0;
        z-index: 200;
    }
.cmp-adaptiveform-button--primary {
    display: inline-block;
    width: 100%;
    height: min-content;
}

.cmp-adaptiveform-button--primary .cmp-adaptiveform-button__widget {
    width: 100%;
}

.cmp-adaptiveform-button--secondary {
    display: inline-block;
    width: 100%;
    margin-top: auto;
    margin-right: 0;
    height: min-content;
}

.cmp-adaptiveform-button--secondary .cmp-adaptiveform-button__widget {
    background-color: var(--gem-color-neutral-00, #ffffff);
    border: 2px solid var(--gem-color-red-600, #c25244);
    color: var(--gem-color-red-600, #c25244);
    width: 100%;
    padding: 10px;
}

@media (min-width : 520px) {
    .cmp-adaptiveform-modal .cmp-container.cmp-adaptiveform-modal__body,
    .gds-Modal.cmp-adaptiveform-modal .gds-Modal-Content [data-otp-body="true"],
    .cmp-adaptiveform-modal [data-otp-body="true"] {
        flex-direction: row;
    }
    .cmp-adaptiveform-button--primary, .cmp-adaptiveform-button--secondary {
        width: calc(50% - 0.5rem);
        margin-top: auto;
    }
}

@media (min-width : 768px) {
    .cmp-adaptiveform-modal .cmp-container.cmp-adaptiveform-modal__body,
    .gds-Modal.cmp-adaptiveform-modal .gds-Modal-Content [data-otp-body="true"],
    .cmp-adaptiveform-modal [data-otp-body="true"] {
        height: auto;
        padding: var(--spacing-10, var(--gem-spacing-10, 40px));
        max-width: 45rem;
    }
    .cmp-adaptiveform-button--secondary {
        margin-left: auto;
    }
    .cmp-adaptiveform-button--primary,
    .cmp-adaptiveform-button--secondary {
        width: auto;
    }

    .cmp-adaptiveform-button--primary .cmp-adaptiveform-button__widget,
    .cmp-adaptiveform-button--secondary .cmp-adaptiveform-button__widget {
        width: auto;
        min-width: 12.5rem;
    }
    .cmp-adaptiveform-modal-open {
        height: 100vh;
    }
}

/* DIG-1654: Tablet button sizing — ensure buttons have adequate min-width at tablet breakpoint */
@media (min-width: 520px) and (max-width: 1023px) {
    .gds-Modal.cmp-adaptiveform-modal .gds-Modal-Footer-Actions gds-button,
    .gds-Modal.cmp-adaptiveform-modal .gds-Modal-Footer-Actions button {
        min-width: 140px;
    }
}

/* DIG-1659: Typography overrides for OTP modal content (within GDS modal scope) */
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] h2 {
    font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
    font-size: 22px;
    font-weight: 600;
    color: #282B3E;
}

.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] gds-otp-input::part(label),
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] .gds-OtpInput-Label {
    font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
    font-size: 18px;
    font-weight: 600;
    color: #282B3E;
}

.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] .font-demibold:not(h2) {
    font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: #282B3E;
}

.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] #otp-resend-link-label {
    font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
    font-size: 16px;
    font-weight: 400;
}
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] #otp-resend-link-label:not([data-disabled="true"]) {
    color: var(--color-text-primary);
}
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] #otp-resend-link-label[data-disabled="true"] {
    color: var(--gem-color-neutral-800);
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] .otp-timer {
    color: var(--gem-color-neutral-800);
    margin-left: 4px;
}

/* Resend link — gds-modal-static context (Sites pages, HTML-only modal) */
gds-modal-static.cmp-adaptiveform-modal [data-otp-body="true"] #otp-resend-link-label {
    font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
    font-size: 16px;
    font-weight: 400;
}
gds-modal-static.cmp-adaptiveform-modal [data-otp-body="true"] #otp-resend-link-label:not([data-disabled="true"]) {
    color: var(--color-text-primary);
}
gds-modal-static.cmp-adaptiveform-modal [data-otp-body="true"] .otp-timer {
    color: var(--gem-color-neutral-800);
    margin-left: 4px;
}
gds-modal-static.cmp-adaptiveform-modal [data-otp-body="true"] #otp-resend-link-label[data-disabled="true"] {
    color: var(--gem-color-neutral-800);
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}

/* DIG-1658: Phone icon color */
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] .text-green-700 {
    color: var(--color-text-primary);
}

/* ── gds-modal-static: Sites-page HTML-only button bar ──
   Matches the GDS Modal button container layout/styling so the
   server-rendered buttons look identical to the React-rendered ones
   on the standalone AF page. Only applies inside gds-modal-static
   to avoid affecting the <gds-modal> on standalone pages. */
gds-modal-static.cmp-adaptiveform-modal--open {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Specificity 0,3,1 beats base rule's 0,3,0 for
   .cmp-adaptiveform-modal .cmp-container.cmp-adaptiveform-modal__body */
gds-modal-static.cmp-adaptiveform-modal .cmp-container.cmp-adaptiveform-modal__body {
    height: auto;
    margin: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-2, 4px) var(--radius-2, 4px) 0 0;
}
/* Override the 520px media query that changes flex-direction to row */
@media (min-width: 520px) {
    gds-modal-static.cmp-adaptiveform-modal .cmp-container.cmp-adaptiveform-modal__body {
        flex-direction: column;
    }
}
gds-modal-static .cmp-adaptiveform-modal__button-bar {
    background: var(--gem-color-neutral-00, #fff);
    padding: 0 var(--gem-spacing-4, 16px) var(--gem-spacing-6, 24px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gem-spacing-3, 12px);
    justify-content: flex-end;
    width: 100%;
    max-width: 45rem;
    box-shadow: none;
    border-radius: 0 0 var(--radius-2, 4px) var(--radius-2, 4px);
}
@media (min-width: 768px) {
    gds-modal-static .cmp-adaptiveform-modal__button-bar {
        padding: 0 var(--spacing-10, 40px) var(--spacing-10, 40px);
    }
}
gds-modal-static .cmp-adaptiveform-modal__btn {
    font-family: var(--font-sans, "Manulife JH Sans Optimized", sans-serif);
    font-size: 16px;
    font-weight: 600;
    min-width: 160px;
    padding: 12px 32px;
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid transparent;
    transition: background-color 0.15s, border-color 0.15s;
}
gds-modal-static .cmp-adaptiveform-modal__btn--primary {
    background-color: var(--gem-color-red-600, #c25244);
    color: #fff;
    border-color: var(--gem-color-red-600, #c25244);
}
gds-modal-static .cmp-adaptiveform-modal__btn--primary:hover {
    background-color: #a51e33;
    border-color: #a51e33;
}
gds-modal-static .cmp-adaptiveform-modal__btn--secondary {
    background-color: var(--gem-color-neutral-00, #fff);
    color: var(--gem-color-red-600, #c25244);
    border-color: var(--gem-color-red-600, #c25244);
}
gds-modal-static .cmp-adaptiveform-modal__btn--secondary:hover {
    background-color: #fef0f1;
}

/* ============================================================
 * Form Submit Message — Thank You & Error XF Containers
 *
 * Duplicate of ui.frontend/src/components/form-submit-message.css
 * included in clientlib-forms-theme so Global Template pages
 * (which do NOT load manulife-asia.site.js) still get these styles.
 * ============================================================ */

/* Backward compat: old class names (form-submit-msg*) kept as selector aliases for existing authored XF content */

.cmp-af-asia-submit-msg,
.form-submit-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--gem-spacing-6, 32px) var(--gem-spacing-4, 16px);
  font-family: 'Manulife JH Sans Optimized', 'Manulife JH Sans', Arial, sans-serif;
  color: var(--gem-color-neutral-1100, #282b3e);
  width: 100%;
  min-width: 320px;
  max-width: 767px;
}

.cmp-af-asia-submit-msg__icon,
.form-submit-msg__icon {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  margin-bottom: var(--gem-spacing-5, 24px);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: inherit;
}

.cmp-af-asia-submit-msg--success .cmp-af-asia-submit-msg__icon,
.form-submit-msg--success .form-submit-msg__icon {
  background-color: var(--gem-color-neutral-1100, #282b3e);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22.8A10.8 10.8 0 1 1 22.8 12 10.81 10.81 0 0 1 12 22.8m0-19.6a8.8 8.8 0 1 0 8.8 8.8A8.81 8.81 0 0 0 12 3.2'/%3E%3Cpath fill='black' d='M7.544 8.832h1.912v2H7.544zm6.96 0h1.91v2h-1.91zm-2.524 8.974a4.44 4.44 0 0 1-4.435-4.435h2a2.435 2.435 0 0 0 4.87 0h2a4.44 4.44 0 0 1-4.435 4.435'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22.8A10.8 10.8 0 1 1 22.8 12 10.81 10.81 0 0 1 12 22.8m0-19.6a8.8 8.8 0 1 0 8.8 8.8A8.81 8.81 0 0 0 12 3.2'/%3E%3Cpath fill='black' d='M7.544 8.832h1.912v2H7.544zm6.96 0h1.91v2h-1.91zm-2.524 8.974a4.44 4.44 0 0 1-4.435-4.435h2a2.435 2.435 0 0 0 4.87 0h2a4.44 4.44 0 0 1-4.435 4.435'/%3E%3C/svg%3E");
}

.cmp-af-asia-submit-msg--error .cmp-af-asia-submit-msg__icon,
.form-submit-msg--error .form-submit-msg__icon {
  background-color: var(--gem-color-neutral-1100, #282b3e);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.99 1.2A10.8 10.8 0 1 0 22.79 12a10.81 10.81 0 0 0-10.8-10.8m0 19.6a8.8 8.8 0 1 1 8.8-8.8 8.81 8.81 0 0 1-8.8 8.8'/%3E%3Cpath fill='black' d='M7.559 8.782h1.909V10.8h-1.91zm6.952 0h1.91V10.8h-1.91z'/%3E%3Cpath fill='black' d='M12 13.5a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 1.8a1.2 1.2 0 0 1 1.2 1.2A1.2 1.2 0 0 1 12 17.7a1.2 1.2 0 0 1-1.2-1.2A1.2 1.2 0 0 1 12 15.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.99 1.2A10.8 10.8 0 1 0 22.79 12a10.81 10.81 0 0 0-10.8-10.8m0 19.6a8.8 8.8 0 1 1 8.8-8.8 8.81 8.81 0 0 1-8.8 8.8'/%3E%3Cpath fill='black' d='M7.559 8.782h1.909V10.8h-1.91zm6.952 0h1.91V10.8h-1.91z'/%3E%3Cpath fill='black' d='M12 13.5a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 1.8a1.2 1.2 0 0 1 1.2 1.2A1.2 1.2 0 0 1 12 17.7a1.2 1.2 0 0 1-1.2-1.2A1.2 1.2 0 0 1 12 15.3'/%3E%3C/svg%3E");
}

.cmp-af-asia-submit-msg__title,
.form-submit-msg__title {
  font-size: var(--gem-font-size-1400, 2rem);
  font-weight: var(--gem-font-weight-demibold, 600);
  line-height: 1.25;
  margin: 0 0 var(--gem-spacing-5, 24px);
}

/* Adobe OOTB `.cmp-aemform__content .tyMessage h2` (0,2,1) sets margin-top
 * to var(--spacing-12) → 48px, beating the (0,1,0) rule above. */
.cmp-aemform__content .tyMessage h2.cmp-af-asia-submit-msg__title,
.cmp-aemform__content .tyMessage h2.form-submit-msg__title {
    margin-top: 0;
}

.cmp-af-asia-submit-msg__title em,
.form-submit-msg__title em {
  font-family: 'Manulife JH Serif Optimized', 'Manulife JH Serif', serif;
  font-style: italic;
  font-weight: var(--gem-font-weight-demibold, 600);
}

.cmp-af-asia-submit-msg--error .cmp-af-asia-submit-msg__title em,
.form-submit-msg--error .form-submit-msg__title em {
  font-family: 'Manulife JH Serif Optimized', 'Manulife JH Serif', serif;
  font-weight: var(--gem-font-weight-regular, 400);
  font-size: 2rem;
}

.cmp-af-asia-submit-msg__desc,
.form-submit-msg__desc {
  font-family: 'Manulife JH Sans Optimized', 'Manulife JH Sans', Arial, sans-serif;
  font-size: var(--gem-font-size-600, 1.125rem);
  font-weight: var(--gem-font-weight-regular, 400);
  line-height: 1.5;
  min-width: 288px;
  max-width: 735px;
  width: 100%;
}

.cmp-af-asia-submit-msg__links,
.form-submit-msg__links {
  display: flex;
  flex-direction: column;
  gap: var(--gem-spacing-2, 8px);
  align-items: flex-start;
  width: 100%;
  min-width: 288px;
  max-width: 735px;
  font-size: var(--gem-font-size-600, 1.125rem);
  font-family: 'Manulife JH Sans Optimized', 'Manulife JH Sans', Arial, sans-serif;
}

.cmp-af-asia-submit-msg__actions,
.form-submit-msg__actions {
  margin-top: var(--gem-spacing-5, 24px);
}

.cmp-af-asia-submit-msg .cmp-af-asia-form__xf-goback,
.form-submit-msg .form-xf-goback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: var(--gem-spacing-3, 12px);
  font-family: 'Manulife JH Sans Optimized', 'Manulife JH Sans', Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #C25244;
  background: transparent;
  border: 2px solid #C25244;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.cmp-af-asia-submit-msg .cmp-af-asia-form__xf-goback:hover,
.form-submit-msg .form-xf-goback:hover {
  background-color: #C25244;
  color: #fff;
}

.cmp-af-asia-submit-msg .cmp-af-asia-form__xf-goback:focus-visible,
.form-submit-msg .form-xf-goback:focus-visible {
  outline: 2px solid #C25244;
  outline-offset: 2px;
}

/* Responsive: Tablet MD (768px+) */
@media (min-width: 768px) {
  .cmp-af-asia-submit-msg,
  .form-submit-msg {
    display: grid;
    grid-template-columns: 5rem 1fr;
    column-gap: var(--gem-spacing-7, 40px);
    align-items: start;
    padding: var(--gem-spacing-7, 40px) var(--gem-spacing-5, 24px);
    min-width: 768px;
    max-width: 1279px;
    position: relative;
  }

  .cmp-af-asia-submit-msg--error,
  .form-submit-msg--error {
    grid-template-columns: 5rem 1fr;
  }

  .cmp-af-asia-submit-msg__icon,
  .form-submit-msg__icon {
    grid-column: 1;
    grid-row: 1 / -1;
    margin-bottom: 0;
    width: 5rem;
    height: 5rem;
    position: absolute;
  }

  .cmp-af-asia-submit-msg__title,
  .cmp-af-asia-submit-msg__desc,
  .cmp-af-asia-submit-msg__links,
  .cmp-af-asia-submit-msg__actions,
  .form-submit-msg__title,
  .form-submit-msg__desc,
  .form-submit-msg__links,
  .form-submit-msg__actions {
    grid-column: 2;
  }

  .cmp-af-asia-submit-msg__title,
  .cmp-af-asia-submit-msg__desc,
  .cmp-af-asia-submit-msg__links,
  .form-submit-msg__title,
  .form-submit-msg__desc,
  .form-submit-msg__links {
    min-width: 600px;
    max-width: 751px;
  }
}

/* Responsive: Desktop LG (1280px+) */
@media (min-width: 1280px) {
  .cmp-af-asia-submit-msg,
  .form-submit-msg {
    padding: var(--gem-spacing-8, 48px) var(--gem-spacing-7, 40px);
    min-width: 1280px;
    max-width: 1526px;
    margin: 0 auto;
  }

  .cmp-af-asia-submit-msg__title,
  .form-submit-msg__title {
    font-size: var(--gem-font-size-1400, 2rem);
  }

  .cmp-af-asia-submit-msg--error .cmp-af-asia-submit-msg__title,
  .form-submit-msg--error .form-submit-msg__title {
    font-size: 2rem;
  }

  .cmp-af-asia-submit-msg__title,
  .cmp-af-asia-submit-msg__desc,
  .cmp-af-asia-submit-msg__links,
  .form-submit-msg__title,
  .form-submit-msg__desc,
  .form-submit-msg__links {
    min-width: 751px;
    max-width: 751px;
  }
}

/* AFCC Thank-You / Error transition */
.cmp-af-asia-form--js-ready .tyMessage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease-in, visibility 0s linear 0.15s;
}

.cmp-af-asia-form--js-ready .tyMessage.cmp-af-asia-submit-msg--ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.cmp-adaptiveform-container.cmp-af-asia-form--submitting {
  opacity: 0;
  pointer-events: none;
  min-height: 200px;
}

/* Phase 3 — Hide form children via class toggle (replaces inline display:none) */
.cmp-af-asia-form__child--hidden {
  display: none;
}