/* Trinergy CSS */
/* Reusable emphasis (section titles, labels, any inline text) */
.bold {
  font-weight: 700;
  color: #484848;
}

.nowrap{
  white-space: nowrap;
}

.com__silveryear__form-background .com__general__form-content-first {
  background: #EBEFF1;
}

.com_cards-listing .cards-listing .single-card__wrapper::before{
background: #ffffff;
}

.tempus-dominus-widget .toolbar div[data-action="togglePicker"] {
display: none !important;
visibility: hidden;
}

textarea::placeholder {
font-size: 14px;
}
.logo{
  padding: 10px 10px;
}

.salutation-radio p, #salutation.s2-salutation-main-label {
position: relative;
}

#S2 .s2-salutation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

#S2 #salutation.s2-salutation-main-label {
  display: inline-block;
  margin: 0;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4f5962;
  line-height: 1.4;
  flex: 0 0 auto;
}

#S2 .s2-salutation-radios.salutation-radio {
  flex: 1 1 auto;
}

#thank-you-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0px 2px 15px 8px rgba(0, 0, 0, 0.03);
}

.details-adjust-position {
position: relative;
left: -15px;
}

#contact-form #salutation-others {
width: 200px;
}

@media (max-width: 767px) {
#contact-form #satisfaction-img {
  width: 100%;
  height: auto;
}
}

@media (min-width: 768px) {
#contact-form #satisfaction-img {
  width: 70%;
  height: auto;
}
}

@media(min-width: 1024px) {
#contact-form #satisfaction-img {
  width: 50%;
  height: auto;
}
.header-no-sub .header__sub {
   display: none !important; 
  }
}

#contact-form .contact_label {
font-weight: bold;
}

#contact-form #botboot {
font-family: "OpenSans", Helvetica, Arial, sans-serif;
font-size: 18px;
padding-bottom: 5px;
}

#contact-form .row-captcha {
padding-left: 15px;
}

@media (max-width: 767px) {
#contact-form #generated_form_display .captcha-question {
  margin-bottom: 0px;
}

#contact-form #generated_form_display .captcha-answer {
  margin-bottom: 60px;
}
}


/* Satisfaction card styles */

/* form Start */
.col-cust-form {
margin-bottom: 20px;
}

.tr-form-rate {
margin-bottom: 15px;
}

.card-form-rate {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 20px;
}

.lbl-form-rate {
flex-basis: 180px;
width: 180px;
}

@media (max-width: 767px) {
.opt-form-rate {
  width: 300px;
}

.tb-form-rate {
  margin-left: 0px;
}

.arrow-container {
  width: 50px;
}
}

@media (min-width: 768px) {
.opt-form-rate {
  width: 400px;
}

.tb-form-rate {
  margin-left: 40px;
}
}

.list-opt-form-rate {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
}

.item-opt-form-rate {
width: 15px;
text-align: center;
}

.item-opt-form-rate-cap {
min-width: 70px;
}

.item-opt-form-rate-cap:first-child {
margin-left: -30px;
}

.item-opt-form-rate-cap:last-child {
margin-right: -30px;
}

.lbl-rate-num {
width: 15px;
text-align: center;
font-weight: bold;
}

.lbl-rate-capt {
text-align: center;
font-weight: bold;
}

.arrow-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

.arrow-head {
color: #979797;
}

.arrow-body {
width: 200px;
height: 1px;
background-color: #979797;
}


@media (max-width: 640px) {
.form-box {
  margin: 0px auto;
  padding: 20px 20px;
  border-radius: 15px;
}

.lbl-cust {
  white-space: normal;
}


.lbl-rate-capt {
  font-size: 12px;
  line-height: 16px;
}

.arrow-body {
  width: 120px;
}

.card-form-rate {
  gap: 0px;
}

.lbl-form-rate {
  padding-right: 10px;
}

.lbl-form-rate.caption-empty {
  flex-basis: auto;
  width: auto;
  padding-right: 0px;
}

}

/* form End */

/* datepicker Start */
.ui-widget-header .ui-icon {
background-image: url(../images/jquery-ui/ui-icons_444444_256x240.png);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #ea1c31;
background: #f6f6f6;
color: #333333;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
border: 1px solid #ea1c31;
background: #ea1c31;
font-weight: normal;
color: #ffffff;
}

/* datepicker End */

/* enroll Start */
.expand-container {
overflow: hidden;
height: 0px;

-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}

.form-enrol {
margin: auto auto auto auto;
padding: 20px;
max-width: 460px;
}

.enrol-btn-cta {
display: inline-block;
margin: 20px;
border-radius: 10px;
padding: 16px 30px;
font-size: 20px;
line-height: 20px;
}

.col-cta {
position: relative;
}

.ico-cta-container {
margin: auto;
width: 100%;
max-width: 240px;
text-align: center;
}

.ico-cta-container img {
margin: auto;
width: 100%;
}

.how-method-or {
position: absolute;
top: 100px;
left: -45px;
font-size: 22px;
}

.how-sms-container {
display: inline-block;
margin: 20px auto;
padding: 10px 40px;
border-radius: 8px;
font-size: 20px;
}

.lbl-or-txt {
display: inline-block;
padding: 0px 15px;
background-color: #ffffff;
}

.submitButton {
margin: 30px auto 10px auto;
padding: 10px 30px;
border: 1px solid transparent;
border-radius: 6px;
background-color: #c1271a;
color: #fff;
font-size: 18px;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
background-color: #9d9d9d;
}

@media (max-width: 640px) {
.how-method-or {
  position: relative;
  top: -35px;
  left: auto;
  margin: 20px auto;
}

.col-cust-participate {
  border-right: none;
}

.col-cust-participate .col-cta {
  border-bottom: 1px solid #333333;
}

.col-cust-participate .col-cta {
  border-bottom: 1px solid #333333;
}

.ico-cta-container img {
  max-width: 150px;
}
}

/* enroll End */

.cta__basic li {
color: #484848;
margin-bottom: -3px;
}

.list-bullet li::before {
display: none;
visibility: hidden;
}

.com__silveryear__form-background {
background: #EBEFF1 !important;
}

.col-xs-12.custom__heading-title.font-weight-bold.w--100.mb4 {
padding-left: 0px;
}

ul.list-bullet li {
padding-bottom: 5px;
}

#generated_form_display .terms-element .cc-agreement-doc-link {
  font-style: normal;
  font-weight: inherit;
  color: #484848;
  text-decoration: underline;
}

#generated_form_display .terms-element .declaration-title .cc-agreement-doc-link {
  font-weight: 700;
  color: #484848;
  text-decoration: underline;
}

/* Permanent Resident (S3): inline error when "Yes" is selected */
#generated_form_display .cc-permanent-resident-error {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #EF473A;
  background: #FFEAEA;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

#generated_form_display .cc-permanent-resident-error__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EF473A !important;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
}

#generated_form_display .cc-permanent-resident-error__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #EF473A !important;
  font-weight: 600;
}

.has-error .help-block {
color: #EF473A !important;
}

.captcha-placeholder::placeholder {
font-size: 14px;
font-family: inherit;
color: grey;
}

@media (min-width: 768px) {
li > div {
  line-height: 18px;
}
}

@media (max-width: 767px) {
#generated_form_display .dropdown-element .form-group select {
  width: 100% !important;
}

.col-md-6.details-adjust-position {
  padding-left: 25px;
}
p#agreement, .salutation-radio p {
  margin-top: -2px;
}
}

/* p#agreement {
margin-top: -3px;
} */

.section-element:last-child .static-element .form-group {
margin-bottom: 30px !important;
}

@media (max-width: 767px) {
.lang-pl {
  padding-left: unset;
  padding-top: 8px;
}
}

@media (min-width: 768px) and (max-width: 837px) {
.lang-pl {
  padding-left: 10px;
}
}

@media (min-width: 838px) and (max-width: 1023px) {
.lang-pl {
  padding-left: 0px;
}
}

@media (min-width: 1024px) {
.lang-pl {
  padding-left: 10px;
}

.header__main {
  height: 118px; 
}

.header__row {
  margin: 2% 0; 
}

 .header-no-sub .header__row {
  margin-top: 0; 
}
/* Compact footer (match staging footer bar) */
.common__footer {
  height: auto;
  padding: 14px 0;
}

#copyright {
  padding-top: 0;
  align-items: center;
}

footer#footer {
  padding-top: 0px;
  padding-bottom: 20px;
  margin-top: 0 !important;
}
}

@media (max-width: 1023px) {
.header__mobile--bar.d-lg-none.d-block {
   display: none !important; 
}
}
/* campagin footer CSS */
.row.top.common__footer-widgets, hr.mt-mob-0, .header__main--secondary hr {
display: none !important;
visibility: hidden !important;
}

/* Footer bar sizing + typography (all breakpoints) */
footer#footer {
margin-top: 0 !important;
}

footer#footer section.common__footer {
padding-top: 14px;
padding-bottom: 14px;
}

footer#footer #copyright {
padding-top: 0 !important;
}

footer#footer #copyright .footer-note-links a,
footer#footer #copyright .copyright-desc {
font-size: 12px;
line-height: 1.35;
}

/* Card listing: center the Apply now button */
#S1 .single-card .card-buttons {
justify-content: center !important;
}

#S1 .single-card .card-buttons > a.button {
margin-left: auto !important;
margin-right: auto !important;
}


/* event form CSS */
#event-form .col-md-6.autofill-section {
padding-left: 0px;
}

#generated_form_display .shariah-application .form-group {
margin-bottom: 50px !important;
}

#personal-details-div .form-group {
margin-bottom: 35px !important;
}

#event-form .col-md-12.radio-element .form-group  {
margin-bottom: 40px !important;
}

#personal-details-title, #preferred-arangement-title {
font-size: 21px;
}

@media (min-width: 768px) {
#generated_form_display #event-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#generated_form_display #event-form, #generated_form_display #event-form .wizard-card-footer, #generated_form_display #event-form #form_hotline {
  position: relative;
  width: 100%;
  min-height: 1px;
}
#generated_form_display #event-form .wizard-navigation {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
#generated_form_display #event-form .wizard-card-footer {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
#generated_form_display #event-form #form_hotline {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(50% - 40px);
  flex: 0 0 calc(50% - 40px);
  max-width: calc(50% - 40px);
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #667c88;
}
}

@media (min-width: 1440px) {
 #generated_form_display #event-form .radio-element .form-group > div label > span:before {
  margin-top: 3px;
} 
}

@media (max-width: 426px) {
 #generated_form_display #event-form .radio-element .form-group > div label > span:before {
  margin-top: 2px;
} 
}

/* S1 mobile layout cleanup */
@media (max-width: 767px) {
#generated_form_display {
  padding-left: 14px;
  padding-right: 14px;
}

#generated_form_display #form-title {
  /* font-size: 10px;
  letter-spacing: 0.22em; */
}

#generated_form_display #S1 #form-subtitle-s1 {
  font-size: 18px;
  line-height: 1.35;
  margin-top: 18px;
  margin-bottom: 20px;
}

#S1 .group-height {
  display: block;
}

#S1 .single-card {
  width: 100%;
  margin-bottom: 18px;
}

.com_cards-listing-v2 .cards-listing .single-card .single-card__wrapper{
  margin-bottom: 40px;
}

.com_cards-listing .cards-listing .single-card__wrapper{
  padding: 0px 40px 40px;
}

#S1 .single-card .single-card__thumbnail,
#S1 .single-card .single-card__details .same-height,
#S1 .single-card .card-buttons {
  min-height: 0 !important;
}

#S1 .single-card .single-card__thumbnail img.card-shadow + img {
  width: 200px;
  height: auto;
}

#S1 .single-card .card-title p,
#S1 .single-card .card-title p b {
  color: #333333;
}

#S1 .single-card .card-title p {
  font-size: 14px;
  line-height: 1.4;
}

#S1 .single-card .card-features li span {
  /* font-size: 12px; */
  line-height: 1.45;
}

#S1 .single-card .card-buttons {
  margin-top: 10px;
  text-align: center;
}

#S1 .single-card .card-buttons > a.button {
  min-width: 90px;
  padding: 8px 14px;
}
}

/* S1 + shell: narrow mobile (≤425px) — match OCBC mobile card listing reference */
@media (max-width: 425px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: #f0f2f5 !important;
  }

  .iw_component.com__silveryear__form-background,
  .com__silveryear__form-background .com__general__form-content-first {
    background: #f0f2f5 !important;
  }

  .com__silveryear__form-background .com__general__form-content-first.s2-active {
    background: #ffffff !important;
  }

  .header__row {
    background: #ffffff;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px 20px 14px;
  }

  .header__row .header__logo {
    padding-left: 0;
    padding-right: 0;
  }

  .header__logo .logo img {
    width: 120px;
    height: auto;
    max-width: 100%;
  }

  /* .header__logo::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #d71920;
    margin-top: 12px;
    border-radius: 1px;
  } */

  #generated_form_display.container {
    width: 100% !important;
    max-width: 100%;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* #generated_form_display .subcategory.subcategory--black {
    padding-top: 4px;
    padding-bottom: 0 !important;
    margin-bottom: 0;
  } */

  #generated_form_display .subcategory.subcategory--black::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: #d71920;
    margin-bottom: 14px;
    border-radius: 1px;
  }

  #generated_form_display #form-subtitle-s1 {
    font-size: 15px !important;
    line-height: 1.5;
    font-weight: 400;
    color: #4a5056;
    margin-top: 12px !important;
    margin-bottom: 32px !important;
  }

  #S1 .com_cards-campaign {
    padding-top: 0;
  }

  #S1 .ac-li-row,
  #S1 .al-ro-col,
  #S1 .cards-listing {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }

  #S1 .group-height.row {
    overflow: visible !important;
  }

  #generated_form_display #S1.card-listing-v2,
  #generated_form_display #S1 .com_cards-campaign {
    overflow: visible !important;
  }

  #S1 .single-card {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    margin: 0 0 48px 0 !important;
    padding-top: 76px;
    overflow: visible !important;
  }

  #S1 .single-card:last-child {
    margin-bottom: 28px !important;
  }

  #S1 .single-card__wrapper {
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    padding: 0 18px 22px !important;
    position: relative;
    overflow: visible;
  }

  #S1 .com_cards-listing .cards-listing .single-card__wrapper::before {
    /* display: none !important; */
  }

  #S1 .single-card__thumbnail {
    margin: -76px auto 10px !important;
    text-align: center;
    position: relative;
    z-index: 2;
    min-height: 0 !important;
  }

  #S1 .single-card__thumbnail .d-inline-block {
    display: inline-block !important;
  }

  #S1 .single-card__thumbnail img.card-shadow + img {
    width: 200px !important;
    max-width: 78vw !important;
    height: auto !important;
  }

  #S1 .single-card__details {
    text-align: center;
  }

  #S1 .single-card .card-title {
    text-align: center;
    margin-bottom: 4px;
  }

  #S1 .single-card .card-title p,
  #S1 .single-card .card-title p b {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35;
    color: #2c3136 !important;
  }

  #S1 .single-card .same-height {
    min-height: 0 !important;
  }

  #S1 .single-card .card-features {
    margin: 0 auto;
    text-align: left;
    max-width: 100%;
    padding: 0 2px;
  }

  #S1 .single-card .card-features ul {
    margin-top: 10px !important;
  }

  #S1 .single-card .card-features li span {
    font-size: 13px !important;
    line-height: 1.45;
    color: #4a5056;
  }

  #S1 .single-card .card-buttons {
    margin-top: 18px !important;
    justify-content: center !important;
    min-height: 0 !important;
  }

  #S1 .single-card .card-buttons > a.button {
    display: inline-block;
    background: #ffffff !important;
    color: #0072bc !important;
    border: 1px solid #0072bc !important;
    border-radius: 4px !important;
    padding: 10px 36px !important;
    min-width: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #S1 .single-card .card-buttons > a.button:hover,
  #S1 .single-card .card-buttons > a.button:focus {
    background: #f0f7fc !important;
    color: #005efd !important;
    border-color: #005efd !important;
  }
}

/* S1 subtitle position (desktop/tablet) */
@media (min-width: 768px) {
  #generated_form_display #S1 #form-subtitle-s1 {
    margin-top: 18px;
    margin-bottom: 26px;
  }
}

/* S1 card listing bullet alignment */
#S1 .single-card .card-features ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

#S1 .single-card .card-features li {
  position: relative;
  margin-bottom: 4px;
  padding-left: 14px;
}

#S1 .single-card .card-features li:last-child {
  margin-bottom: 0;
}

#S1 .single-card .card-features li i.fa {
  display: none;
}

#S1 .single-card .card-features li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 12px;
  line-height: 1.6;
}

#S1 .single-card .card-features li span {
  display: inline;
}

/* S2 mock alignment */
/* Apply white background on the shared container only when S2 is active */
.com__silveryear__form-background .com__general__form-content-first.s2-active {
  background: #ffffff;
}

#S2 {
  background: transparent;
  border-radius: 0;
  padding: 0 !important;
  margin: 0;
}

#S2 .section-element {
  background: transparent;
  border-radius: 0;
  padding: 28px 28px 24px;
}

/* S2 hero: match SAMPLE trinergy-form / OCBC e-forms (OpenSans stack) */
#S2 .s2-card-hero {
  margin-bottom: 4px;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#S2 .selected-card-header.selected-card-product-row {
  display: flex;
  align-items: center !important;
  gap: 14px 20px;
  margin-bottom: 40px;
}

#S2 .selected-card-image-wrap {
  flex: 0 0 auto;
}

#S2 #selected-card-image {
  width: auto;
  height: auto;
  max-height: 160px;
  display: block;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.20);
}

/* Card name (S2) same colour as S1 listing; Apply Now matches that charcoal */
#S2 .selected-card-title-display,
#S2 #form-subtitle-s2 {
  color: #333333;
}

#S2 .selected-card-title-display {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

#S2 .s2-apply-intro {
  margin: 0;
  padding: 0;
}

#S2 #form-subtitle-s2 {
  margin: 0 0 8px 0;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#S2 .s2-apply-caption,
#S2 #interests-label {
  margin: 0;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #555555;
}

#S2 .wrapper.row {
  margin-top: 4px;
}

#S2 .form-group {
  /* margin-bottom: 22px !important; */
}

#S2 .referral-title-row.form-group,
#S2 .agent-title-row.form-group {
  margin-bottom: 10px !important;
}

#S2 .s2-yes-no-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

#S2 .s2-yes-no-radios.salutation-radio {
  flex: 0 1 auto;
}

#S2 .s2-yes-no-question {
  margin: 0 0 10px 0;
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4f5962;
  line-height: 1.4;
}

#S2 .s2-yes-no-inline-row .s2-yes-no-question {
  margin: 0;
  flex: 0 1 auto;
}

#S2 .text-bold {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.35;
}

#S2 .radio-inline.salutation-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

/*
 * CSS-only radios (no Font Awesome): circle left, label text right.
 * Checked state = thick dark ring with white centre (donut), not a filled dot.
 */
#generated_form_display .radio-inline.salutation-radio .radio-custom {
  display: inline-block !important;
  position: relative;
  padding-left: 28px !important;
  margin-right: 0 !important;
  vertical-align: middle;
}

#generated_form_display .radio-inline.salutation-radio .radio-custom p {
  margin: 0;
  line-height: 18px;
}

#generated_form_display .radio-inline.salutation-radio .radio-custom input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: 18px;
  height: 18px;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
}

#generated_form_display .radio-inline.salutation-radio .radio-custom > span {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid #94a4ad !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-sizing: border-box !important;
  display: block !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  color: transparent !important;
  pointer-events: none;
}

#generated_form_display .radio-inline.salutation-radio .radio-custom > span:before,
#generated_form_display .radio-inline.salutation-radio .radio-custom input:checked ~ span:before {
  content: none !important;
  display: none !important;
}

#generated_form_display .radio-inline.salutation-radio .radio-custom input:checked ~ span {
  border-width: 7px !important;
  border-style: solid !important;
  border-color: #667c88 !important;
  background: #fff !important;
}

#generated_form_display .radio-inline.salutation-radio .radio-custom input:checked ~ span::after {
  content: none !important;
  display: none !important;
}

#S2 .custom_form_element.text-element input.form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #c9d1d6;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

#S2 .custom_form_element.text-element input.form-control::placeholder {
  color: #a7b0b8;
}

/* Mobile number: default 60 (editable) + grey suffix hint when value is exactly "60" */
#S2 .cc-mobile-inline {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #c9d1d6;
}

#S2 .cc-mobile-inline__input.form-control {
  border-bottom: none !important;
  margin-bottom: 0;
  background: transparent !important;
  position: relative;
  z-index: 2;
}

#S2 .cc-mobile-inline__hint {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  color: #a7b0b8;
  font-size: 14px;
  line-height: 1.5;
  pointer-events: none;
  z-index: 3;
  font-family: inherit;
  white-space: nowrap;
}

#S2 .cc-mobile-inline__hint.is-visible {
  display: block;
}

/* E-mail: underline row + teal domain shortcut pills */
#S2 .cc-email-inline {
  width: 100%;
  border-bottom: 1px solid #c9d1d6;
  padding-bottom: 1px;
}

#S2 .cc-email-inline__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  justify-content: space-between;
}

#S2 .cc-email-inline__input.form-control {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  flex: 1 1 180px;
  min-width: 0;
  background: transparent !important;
  padding-right: 4px;
}

#S2 .cc-email-domains {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  flex: 0 1 auto;
}

#S2 .cc-email-domain-btn {
  margin: 0;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.35;
  font-family: inherit;
  color: #484848;
  background: #fff;
  border: 1px solid #00C8C3;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

#S2 .cc-email-domain-btn:hover,
#S2 .cc-email-domain-btn:focus {
  background: #f2fafb;
  outline: none;
}

#S2 .cc-email-domain-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(0, 139, 154, 0.35);
}

@media (max-width: 767px) {
  /* E-mail: label, underline row, 2×2 teal-outline chips (mobile reference) */
  #S2 label#email-label {
    color: #484848;
    font-weight: 400;
    margin-bottom: 10px;
    display: block;
  }

  #S2 .cc-email-inline {
    border-bottom: none;
    padding-bottom: 0;
  }

  #S2 .cc-email-inline__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  #S2 .cc-email-inline__input.form-control {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #c9d1d6 !important;
    padding: 4px 0 10px 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
  }

  #S2 .cc-email-inline__input.form-control::placeholder {
    color: #a7b0b8;
  }

  #S2 .cc-email-inline__input.form-control:focus {
    border-bottom-color: #00C8C3 !important;
    outline: none;
    box-shadow: none !important;
  }

  #S2 .cc-email-domains {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    justify-content: stretch;
    flex-wrap: unset !important;
    align-items: stretch;
    overflow: visible;
  }

  #S2 .cc-email-domain-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 10px;
    font-size: 13px;
    line-height: 1.3;
    color: #484848;
    background: #fff;
    border: 1px solid #00C8C3;
    border-radius: 999px;
    white-space: nowrap;
    text-align: center;
  }
}

#S2 .declaration-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px !important;
}

#S2 #agreement-2-label {
  font-size: 17px;
  line-height: 1.55;
  color: #484848;
}

#S2 .wizard-card-footer {
  margin-top: 10px;
}

#S2 .wizard-footer-full {
  justify-content: flex-start !important;
  gap: 12px;
}

#S2 #back-to-cards,
#S2 #back-to-s2 {
  min-width: 84px;
}

#S2 #form_data_submit,
#S2 #s2-continue {
  min-width: 92px;
}

@media (max-width: 767px) {
  .subcategory {
    margin-bottom: 0px !important;
  }

  .custom__heading-title {
    margin-top: 20px !important;
  }

  #S2 {
    padding: 0 !important;
  }
  
  #S2 .section-element {
    padding: 18px 14px;
  }

  /* Selected card hero: stacked image + centered title, then Apply Now block (mobile reference) */
  #S2 .selected-card-header.selected-card-product-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0;
    margin-bottom: 32px !important;
  }

  #S2 .selected-card-image-wrap {
    flex: 0 0 auto !important;
    width: 100%;
    text-align: center;
  }

  #S2 #selected-card-image {
    margin-left: auto;
    margin-right: auto;
    max-height: 220px;
    width: auto;
  }

  #S2 .selected-card-title-display {
    flex: none !important;
    width: 100%;
    max-width: 100%;
    text-align: center !important;
    color: #444444 !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    line-height: 1.35;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  #S2 .s2-apply-intro {
    width: 100%;
    text-align: left;
  }

  #S2 .s2-apply-intro h4.bold {
    font-size: 20px !important;
    line-height: 1.3;
    font-weight: 700 !important;
    color: #2c3136 !important;
    margin: 0 0 8px 0 !important;
    text-align: left;
  }

  #S2 .s2-apply-intro label.pt-4.pb-4 {
    display: block;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: #4a5056 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    text-align: left;
  }

  #S2 #form-subtitle-s2 {
    font-size: 30px;
  }

  #S2 .radio-inline.salutation-radio {
    gap: 10px;
  }

  #S2 .cc-s3-note {
    font-size: 15px !important;
  }

  #S2 .cc-s3-note-list li {
    font-size: 15px !important;
  }
}

/* S3 wizard (Personal / Residential) */
.cc-wizard-progress {
  margin-bottom: 28px;
}

.cc-wizard-progress-meta {
  margin-bottom: 8px;
}

.cc-wizard-step-count {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0097a7;
  margin-bottom: 6px;
}

.cc-wizard-progress-track {
  height: auto;
  min-height: 4px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.cc-wizard-progress-segments {
  display: flex;
  align-items: stretch;
  gap: 5px;
  width: 100%;
}

.cc-wizard-seg {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #d5dde3;
}

.cc-wizard-seg--done {
  flex: 0 0 28px;
  max-width: 36px;
  background: #0097a7;
}

.cc-wizard-seg--current {
  flex: 4 1 0;
  min-width: 56px;
  background: #0097a7;
}

/* Half-width bar; teal “current” matches one of three equal label columns */
.cc-wizard-progress--default {
  width: 50%;
  max-width: 100%;
  box-sizing: border-box;
}

.cc-wizard-progress--default .cc-wizard-seg--current {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  min-width: 0;
}

.cc-wizard-seg--todo {
  flex: 1 1 0;
  min-width: 0;
  background: #d5dde3;
}

.cc-wizard-seg--todo.cc-wizard-seg--todo-compact {
  flex: 0 0 28px;
  max-width: 36px;
  min-width: 0;
}

.cc-wizard-progress-fill {
  width: 20%;
  height: 4px;
  background: #0097a7;
  border-radius: 2px;
  transition: width 0.25s ease;
}

.cc-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 13px;
  color: #4f5962;
  justify-content: space-between;
}

.cc-wizard-steps.cc-wizard-steps--wide {
  flex-wrap: nowrap;
}

.cc-wizard-step-label {
  flex: 1 1 0;
  min-width: 0;
  line-height: 1.35;
}

/* Mobile-only circular wizard (<480px; toggled in index.html and here) */
.cc-wizard-progress--mobile-circular {
  display: none;
  box-sizing: border-box;
  background: #eef1f4;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.cc-wizard-mobile-circular-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}

.cc-wizard-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.cc-wizard-ring-conic {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-sizing: border-box;
}

.cc-wizard-ring-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  border-radius: 50%;
  background: #eef1f4;
  z-index: 1;
}

.cc-wizard-ring-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

.cc-wizard-ring-num {
  color: #0097a7;
}

.cc-wizard-ring-sep,
.cc-wizard-ring-den {
  color: #97a0a8;
}

.cc-wizard-mobile-circular-text {
  min-width: 0;
  flex: 1 1 auto;
}

.cc-wizard-mobile-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 4px 0;
}

.cc-wizard-mobile-next {
  font-size: 13px;
  font-weight: 400;
  color: #97a0a8;
  line-height: 1.35;
  margin: 0;
}

@media (max-width: 479px) {
  .cc-wizard-progress--default {
    display: none !important;
  }
  .cc-wizard-progress--mobile-circular {
    display: block !important;
  }
}

#S2 .cc-s3-section {
  margin-bottom: 32px;
}

#S2 .cc-s3-heading {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1a1a1a;
}

#S2 .cc-s3-heading-residential {
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #333333;
  line-height: 1.35;
  margin-top: 8px;
  margin-bottom: 14px;
}

#S2 .cc-s3-sub {
  font-size: 18px;
  color: #484848;
  margin-bottom: 18px;
}

#S2 .cc-s3-note {
  font-size: 18px;
  color: #484848;
  margin-bottom: 20px;
  padding: 14px 16px 16px;
  background: #ffffff;
  border-radius: 4px;
}

#S2 .cc-s3-note-label {
  font-size: 13p8x;
  font-weight: 400;
  color: #484848;
  margin: 0 0 10px;
  line-height: 1.4;
}

#S2 .cc-s3-note-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

#S2 .cc-s3-note-list li {
  font-size: 18px;
  line-height: 1.5;
  color: #484848;
  margin-bottom: 10px;
  padding-left: 14px;
}

#S2 .cc-s3-note-list li:last-child {
  margin-bottom: 0;
}

#S2 .cc-s3-note-list li::before {
  content: "\2022";
  position: absolute;
  margin-left: -14px;
  font-size: 12px;
  line-height: 1.6;
}

#S2 .cc-s3-note-list strong {
  font-weight: 700;
  color: #4f5962;
}

#S2 #wizard-step-s3 .custom_form_element.dropdown-element select.form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #c9d1d6;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 24px;
  height: auto;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231e6bb8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

#S2 .cc-home-number {
  border-bottom: 1px solid #c9d1d6;
  padding-bottom: 2px;
}

#S2 .cc-home-number .form-control {
  border: none !important;
  box-shadow: none !important;
  padding-left: 8px;
}

#S2 .cc-home-prefix {
  font-size: 18px;
  color: #4f5962;
  padding-right: 4px;
  flex-shrink: 0;
}

/* Wizard: five step labels */
.cc-wizard-steps--wide {
  gap: 8px 20px !important;
  justify-content: flex-start;
}

@media (min-width: 992px) {
  .cc-wizard-steps--wide {
    gap: 8px 32px !important;
  }
}

/* Employment step (S4) */
#S2 #wizard-step-s4 .custom_form_element.text-element input.form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #c9d1d6;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

#S2 #wizard-step-s4 .custom_form_element.dropdown-element select.form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #c9d1d6;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 24px;
  height: auto;
  background-color: transparent;
  color: #1e6bb8;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231e6bb8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

#S2 .cc-income-ringgit,
#S2 .cc-office-number {
  border-bottom: 1px solid #c9d1d6;
  padding-bottom: 2px;
}

#S2 .cc-income-ringgit .form-control,
#S2 .cc-office-number .form-control {
  border: none !important;
  box-shadow: none !important;
  padding-left: 8px;
}

#S2 .cc-income-prefix,
#S2 .cc-office-prefix {
  font-size: 18px;
  color: #4f5962;
  flex-shrink: 0;
}

/* S5 Declarations: inline Yes/No row + conditional underline fields */
#S2 .cc-s5-declare-blocks-group {
  margin-bottom: 8px;
}
#S2 .cc-s5-declare-block {
  padding-bottom: 0px;
  margin-bottom: 0px;
}
#S2 .cc-s5-declare-blocks-group .cc-s5-declare-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#S2 .cc-s5-declare-question-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  width: 100%;
}
#S2 .cc-s5-declare-question {
  margin: 0;
  flex: 1 1 auto;
  min-width: min(100%, 220px);
  font-family: "OpenSans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4f5962;
  line-height: 1.45;
}
#S2 .cc-s5-declare-question.cc-s5-label-with-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
#S2 .cc-s5-declare-radios {
  flex: 0 0 auto;
  margin: 0;
}
#S2 .cc-s5-declare-radios.radio-inline.salutation-radio {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px 18px;
}
#S2 .cc-s5-declare-followup {
  width: 100%;
  margin-top: 16px;
}
#S2 .cc-s5-declare-underline-input .form-control {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #c9d1d6;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  background: transparent;
}
#S2 .cc-s5-declare-underline-input label {
  font-size: 14px;
  font-weight: 400;
  color: #4f5962;
  margin-bottom: 6px;
}
#S2 .cc-s5-declare-underline-input .form-control::placeholder {
  color: #a7b0b8;
}
