/* Override global forms CSS that affects all text elements within Adaptive Forms */

/* [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.
 */

.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;
}

/*
 * 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%;
  margin: 0 auto;
  padding: 10px 20px 10px 10px;
}

/* 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;
}
/* Restore text component styling inside Adaptive Forms after local reset */
.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 {
  color: black;
  font-family: initial;
  font-size: initial;
}
.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 * {
  color: black;
  font-family: initial;
  font-size: initial;
}

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

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

@media (max-width: 768px) {
  div.panelcontainer > .cmp-container:not(:has(> .aem-Grid)) {
    grid-template-columns: 1fr;
  }
}

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

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

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

/* 
 * 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,
body [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,
body [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,
body [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,
body [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,
body [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;
}

/* Ultra-high specificity overrides for text components without !important */
body.aem-editor
  body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .cmp-text,
body.aem-editor
  body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .enhanced-text,
body.aem-editor
  body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .rich-text,
body.aem-editor
  body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .manulife-asia-richtext,
body.aem-editor
  body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .richtext-component,
body.aem-editor .aem-Grid .cmp-container:not(.cmp-adaptiveform-text) .cmp-text,
body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .enhanced-text,
body.aem-editor .aem-Grid .cmp-container:not(.cmp-adaptiveform-text) .rich-text,
body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .manulife-asia-richtext,
body.aem-editor
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .richtext-component,
body .aem-Grid .cmp-container:not(.cmp-adaptiveform-text) .cmp-text,
body .aem-Grid .cmp-container:not(.cmp-adaptiveform-text) .enhanced-text,
body .aem-Grid .cmp-container:not(.cmp-adaptiveform-text) .rich-text,
body
  .aem-Grid
  .cmp-container:not(.cmp-adaptiveform-text)
  .manulife-asia-richtext,
body .aem-Grid .cmp-container:not(.cmp-adaptiveform-text) .richtext-component,
body .responsivegrid .cmp-container:not(.cmp-adaptiveform-text) .cmp-text,
body .responsivegrid .cmp-container:not(.cmp-adaptiveform-text) .enhanced-text,
body .responsivegrid .cmp-container:not(.cmp-adaptiveform-text) .rich-text,
body
  .responsivegrid
  .cmp-container:not(.cmp-adaptiveform-text)
  .manulife-asia-richtext,
body
  .responsivegrid
  .cmp-container:not(.cmp-adaptiveform-text)
  .richtext-component,
body .aem-Grid .cmp-sectioncontainer,
body .responsivegrid .cmp-sectioncontainer,
.cmp-sectioncontainer {
  font-family: "Manulife JH Sans", Helvetica, Arial, sans-serif;
}

body .aem-Grid .cmp-categories,
body .responsivegrid .cmp-categories,
.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,
body [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,
body [class*="[&_img]:border"] img,
body [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);
  cursor: pointer;
  color: var(--color-white);
  letter-spacing: 0;
  background-color: var(--color-coral);
  border: none;
  border-radius: 0;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 12px;
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg);
  display: flex;
  min-width: 200px;
  height: 48px;
}

.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:hover {
  background-color: var(--color-dark-1-coral);
  outline: none;
}

.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:focus,
.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:active {
  background-color: var(--color-dark-2-coral);
  outline: none;
}

.cmp-adaptiveform-button .cmp-adaptiveform-button__widget:disabled {
  background-color: var(--color-light-grey);
}

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

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__widget {
  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: 10px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url(clientlib-site-css/resources/img/icons/ButtonDownIcon.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
}

.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;
}

.cmp-adaptiveform-container .cmp-adaptiveform-dropdown__widget:hover,
.cmp-adaptiveform-dropdown__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-dropdown__widget[aria-invalid="true"]
  + .cmp-adaptiveform-dropdown__errormessage:before {
  content: "⚠";
  color: #db1f00;
  margin-left: 6px;
  margin-right: 10px;
  font-size: 18px;
  line-height: 1;
}

.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-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-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: 10px;
  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;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-datepicker__widget[aria-invalid="true"]
  + .cmp-adaptiveform-datepicker__errormessage:before {
  content: "⚠";
  color: #db1f00;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

.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-text a {
  font-family: var(--font-sans);
  color: #06874e;
  text-decoration: underline;
}

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

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

.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: 10px;
  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;
}

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

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

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

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

.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-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;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-textinput__widget[aria-invalid="true"]
  + .cmp-adaptiveform-textinput__errormessage:before {
  content: "⚠";
  color: #db1f00;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

.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-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-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-checkbox__label p,
.cmp-adaptiveform-checkbox__label div {
  margin: 0;
  padding: 0;
}

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

.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-checkbox__label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background-color: transparent;
  mask-image: url(clientlib-site-css/resources/img/icons/ButtonCheckmarkIcon.svg);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(clientlib-site-css/resources/img/icons/ButtonCheckmarkIcon.svg);
  -webkit-mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  pointer-events: none;
}

.cmp-adaptiveform-checkbox__widget:checked
  + .cmp-adaptiveform-checkbox__label::before {
  border-color: #06874e;
}

.cmp-adaptiveform-checkbox__widget:checked
  + .cmp-adaptiveform-checkbox__label::after {
  background-color: #06874e;
}

.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;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-checkbox[data-cmp-valid="false"]
  .cmp-adaptiveform-checkbox__errormessage:before {
  content: "⚠";
  color: #db1f00;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

.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-checkboxgroup__label,
.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-checkboxgroup__option__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-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-checkboxgroup__option-label p,
.cmp-adaptiveform-checkboxgroup__option-label div {
  margin: 0;
  padding: 0;
}

.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-checkboxgroup__option-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background-color: transparent;
  mask-image: url(clientlib-site-css/resources/img/icons/ButtonCheckmarkIcon.svg);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url(clientlib-site-css/resources/img/icons/ButtonCheckmarkIcon.svg);
  -webkit-mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  pointer-events: none;
}

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

.cmp-adaptiveform-checkboxgroup__option-label:has(
    .cmp-adaptiveform-checkboxgroup__option__widget:checked
  )::after {
  background-color: #06874e;
}

.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;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-checkboxgroup[data-cmp-valid="false"]
  .cmp-adaptiveform-checkboxgroup__errormessage:before {
  content: "⚠";
  color: #db1f00;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

/* ── Radio button ── */
.cmp-adaptiveform-radiobutton__label,
.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-radiobutton__option__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-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-radiobutton__option-label p,
.cmp-adaptiveform-radiobutton__option-label div {
  margin: 0;
  padding: 0;
}

.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-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;
}

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

.cmp-adaptiveform-radiobutton__option-label:has(
    .cmp-adaptiveform-radiobutton__option__widget:checked
  )::after {
  background-color: #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;
}

.cmp-adaptiveform-container
  .cmp-adaptiveform-radiobutton[data-cmp-valid="false"]
  .cmp-adaptiveform-radiobutton__errormessage:before {
  content: "⚠";
  color: #db1f00;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

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

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

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

/* ── Submit Button ── */
.cmp-adaptiveform-button {
  margin-top: 10px;
}

/* ── Tabs Form ── */
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: 10px;
  padding: 12px 12px 12px 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url(clientlib-site-css/resources/img/icons/ButtonDownIcon.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;

  &:hover {
    outline: 2px solid var(--color-neutral-dark-light-1);
    border: none;
  }

  &:focus,
  &:focus-visible,
  &:active {
    outline: 2px solid var(--color-primary-main-dark-1);
    border: none;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cmp-adaptiveform-dropdown__label,
  .cmp-adaptiveform-textinput__label,
  .cmp-adaptiveform-radiobutton__label,
  .cmp-adaptiveform-datepicker__label {
    font-size: 14px;
  }
}

/* ============================================================
 * 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-Body {
    padding: 0;
}

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

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

/* DIG-1654: Ensure modal buttons render at proper size on tablet */
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-ButtonContainer gds-button {
    min-width: 160px;
    --button-padding-x: var(--spacing-8, 32px);
}
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-ButtonContainer gds-button::part(button),
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-ButtonContainer gds-button button,
.gds-Modal.cmp-adaptiveform-modal .gds-Modal-ButtonContainer > button {
    min-width: 160px;
    padding-left: var(--spacing-8, 32px);
    padding-right: var(--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-Body [data-otp-body="true"],
.cmp-adaptiveform-modal [data-otp-body="true"] {
    margin: auto;
    background: var(--color-neutral-light-light-3);
    padding: var(--spacing-6) var(--spacing-4);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: var(--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(--color-neutral-light-light-3);
    border: 2px solid var(--color-coral);
    color: var(--color-coral);
    width: 100%;
    padding: 10px;
}

@media (min-width : 520px) {
    .cmp-adaptiveform-modal .cmp-container.cmp-adaptiveform-modal__body,
    .gds-Modal.cmp-adaptiveform-modal .gds-Modal-Body [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-Body [data-otp-body="true"],
    .cmp-adaptiveform-modal [data-otp-body="true"] {
        height: auto;
        padding: var(--spacing-10);
        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-ButtonContainer gds-button,
    .gds-Modal.cmp-adaptiveform-modal .gds-Modal-ButtonContainer 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([disabled="true"]) {
    color: #06874E;
}
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] #otp-resend-link-label[disabled="true"] {
    color: #5E6073;
}

/* DIG-1658: Phone icon color */
.gds-Modal.cmp-adaptiveform-modal [data-otp-body="true"] .text-dark-1-green {
    color: #06874E;
}

/* ── 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(--color-neutral-light-light-3, #fff);
    padding: 0 var(--spacing-4, 16px) var(--spacing-6, 24px);
    display: flex;
    flex-wrap: wrap;
    gap: var(--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;
    border-radius: var(--radius-2, 4px);
    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(--color-coral, #c6253d);
    color: #fff;
    border-color: var(--color-coral, #c6253d);
}
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(--color-neutral-light-light-3, #fff);
    color: var(--color-coral, #c6253d);
    border-color: var(--color-coral, #c6253d);
}
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(--cds-spacing-6, 32px) var(--cds-spacing-4, 16px);
  font-family: 'Manulife JH Sans Optimized', 'Manulife JH Sans', Arial, sans-serif;
  color: var(--cds-color-dark-navy, #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(--cds-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(--cds-color-dark-navy, #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(--cds-color-dark-navy, #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(--cds-font-size-8xl, 2rem);
  font-weight: var(--cds-font-weight-demibold, 600);
  line-height: 1.25;
  margin: 0 0 var(--cds-spacing-5, 24px);
}

.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(--cds-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(--cds-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(--cds-font-size-xl, 1.125rem);
  font-weight: var(--cds-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(--cds-spacing-2, 8px);
  align-items: flex-start;
  width: 100%;
  min-width: 288px;
  max-width: 735px;
  font-size: var(--cds-font-size-xl, 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(--cds-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: 120px;
  padding: var(--cds-spacing-3, 12px) var(--cds-spacing-5, 24px);
  font-family: 'Manulife JH Sans Optimized', 'Manulife JH Sans', Arial, sans-serif;
  font-size: var(--cds-font-size-base, 1rem);
  font-weight: var(--cds-font-weight-demibold, 600);
  line-height: 1.5;
  color: var(--cds-color-status-error, #d0021b);
  background: transparent;
  border: 2px solid var(--cds-color-status-error, #d0021b);
  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: var(--cds-color-status-error, #d0021b);
  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 var(--cds-color-status-error, #d0021b);
  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(--cds-spacing-7, 40px);
    align-items: start;
    padding: var(--cds-spacing-7, 40px) var(--cds-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(--cds-spacing-8, 48px) var(--cds-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(--cds-font-size-8xl, 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;
}