/* ================================
   Fonts & Base
================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&display=swap');

:root{
  /* Brand defaults (can be overridden by theme) */
  --brand-primary: #aa1f2e;
  --brand-primary-2: #ac1a2d;
  --brand-accent: #b0c1dc;

  /* Text & UI */
  --text-main: #3c3c3c;
  --text-muted: #8697b3;
  --spinner-accent: #007bff;

  /* Form scales */
  --fs-input: 2vh;
  --pad-v: .5vh;
  --pad-h: .75rem;
  --border-color: #ced4da;
  --radius: 6px;

  /* Hero defaults (theme can override) */
  --hero-bg: none;
  --hero-bg-color: #4dae4c;
  --hero-bg-size: cover;
  --hero-bg-position: bottom center;
  --hero-img-height: 70vh;
  --hero-img-padding-top: 10vh;
  --hero-layer2-height: 35vh;
  --hero-footer-width: 80%;

}

*{ box-sizing: border-box; }
body{ margin:0; padding:0; background:#fff; color:var(--text-main); }

/* Headings (scoped) */
#leadGenForm h1,
#leadGenForm h2,
#leadGenForm h3{
  font-family:'Montserrat',sans-serif;
  letter-spacing:-0.02em;
  margin:0 0 1vh 0;
}
#leadGenForm h1{
  color:var(--brand-primary);
  font-weight:600;
  font-size:3vh;
  line-height:3vh;
}
#leadGenForm h2{
  color:var(--brand-primary-2);
  font-size:2vh;
  line-height:2.5vh;
}
#leadGenForm h3{
  color:var(--brand-primary);
  font-size:2vh;
  font-weight:700;
  margin-top:2vh;
}
.small{ line-height:1; color:var(--brand-primary); font-size:2vh; margin-bottom:2vh; }
.colored{ color:var(--brand-primary); }

/* ================================
   Layout
================================ */
#pageContainer{ display:flex; flex-direction:row; height:100vh; }
#leadGenForm{ max-width:100vw; overflow-x:hidden; }

/* Hero left, form right */
#heroImageContainer{
  position:fixed; left:0; top:0;
  width:50vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
}
#heroImageContainerInner{
  width:100%; height:100vh;
  background-image: var(--hero-bg);
  background-color: var(--hero-bg-color);
  background-repeat:no-repeat;
  background-size: var(--hero-bg-size);
  background-position: var(--hero-bg-position);
}
#heroImage{
  display:block; width:auto;
  height: var(--hero-img-height);
  margin:auto; padding-top: var(--hero-img-padding-top);
}
#heroImage-layer2{
  position:absolute; width:auto; height: var(--hero-layer2-height);
}
#heroImageContainerInner .footer{
  width: var(--hero-footer-width);
  color:#fff; font-size:10px; line-height:1; margin-top:5vh;
  text-align: center;
  margin:auto;
}

/* Form column */
#formContainer{
  display:flex; align-items:center; justify-content:center;
  height:100vh; width:50vw; margin-left:50vw; padding:20px;
}
#formContainer-inner{ width:85%; max-width:800px; }

/* ================================
   Form & Inputs
================================ */
.form_section{ min-height:270px; }
.form_section .row{ margin-top:1vh; }

#leadGenForm .input-group-text{
  padding: var(--pad-v) var(--pad-h);
  font-size: var(--fs-input);
  border-top-right-radius:0; border-bottom-right-radius:0;
}

.form-control{ padding: var(--pad-v) var(--pad-h); font-size: var(--fs-input); }
.form-control,
.form-control-custom,
.input-group-text { font-size: var(--fs-input); }

/* Custom form control aligned */
.form-control-custom{
  display:block; width:100%;
  padding: var(--pad-v) var(--pad-h);
  line-height:1.5; font-weight:400;
  color:var(--text-main); background:#fff;
  border:1px solid var(--border-color); border-radius:var(--radius);
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control-custom:focus{ outline:none; }
.form-control-custom.is-valid{
  border-color:var(--bs-form-valid-border-color);
  padding-right:calc(1.5em + .75rem);
  background-repeat:no-repeat;
  background-position:right calc(.375em + .1875rem) center;
  background-size:calc(.9 * var(--fs-input));
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.form-control-custom.is-invalid{
  border-color:var(--bs-form-invalid-border-color);
  padding-right:calc(1.5em + .75rem);
  background-repeat:no-repeat;
  background-position:right calc(.375em + .1875rem) center;
  background-size:calc(.9 * var(--fs-input));
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

/* Wizard */
#leadGenForm .wizard{ margin-bottom:20px; display:block; }
#leadGenForm .step{
  width:48%; height:4vh; display:inline-block; text-align:center;
  font-size:2vh; line-height:2vh; color:#ccc;
  border-bottom:5px solid #eee; margin-right:1%;
}
#leadGenForm .step.processed{ color:#a8bde0; border-bottom-color:#ccdcf7; }
#leadGenForm .step.active{ color:var(--brand-primary); border-bottom-color:var(--brand-primary); }

/* Buttons */
#leadGenForm .button{
  background-color:var(--brand-primary); color:#fff;
  padding:1.5vh 30px; font-size:13px; font-family:Montserrat, sans-serif;
  font-weight:400; text-transform:uppercase; border:none; border-radius:999rem;
  cursor:pointer; margin-top:13px; display:inline-block;
  transition:background-color .2s ease-in-out, color .2s ease-in-out, box-shadow .2s ease-in-out;
}
#leadGenForm .button:hover{ background-color:var(--brand-primary-2); }
#leadGenForm .button.disabled{ background:#ccc; cursor:wait; }
#leadGenForm .frame1err, #leadGenForm .frame2err{ display:inline-block; font-size:11px; color:var(--brand-primary); }

/* T&C & labels */
#leadGenForm .form-check-label{ font-size:2vh; margin-top:3px; }
.form-check .form-check-input{ margin-left:-1.55em; }
#leadGenForm .tc{ font-size:11px; line-height:1.4; margin-top:18px; color:var(--text-muted); }
#leadGenForm .label span, #leadGenForm .label-nric span{ display:block; font-size:11px; font-weight:500; }
#leadGenForm .label span a{ color:#4392ce; text-decoration:none; }
a{ color:var(--brand-primary); text-decoration:none; transition:color .2s ease-in-out; }

/* Frames */
#leadGenForm .frame2, #leadGenForm .frame3, #leadGenForm .frame4, #leadGenForm .frame5{ display:none; position:relative; }
#leadGenForm .frame3 h2{ font-size:4vh; line-height:4vh; margin-bottom:3vh; }
.frame3-inner{ display:flex; align-items:center; justify-content:flex-start; height:80vh; font-size:2.5vh; }
#isMobile .frame3-inner{ height:auto; }
.frame3-inner-inner{ display:flex; flex-direction:column; }

/* Overlay close (+) */
#leadGenForm #btn_overlayClose{ position:absolute; top:0; right:0; width:50px; height:50px; cursor:pointer; text-align:center; z-index:2; }
#leadGenForm #btn_overlayClose div{
  transform:rotate(45deg); font-size:35px; margin:15px 20px 0 0; color:#b9d3de;
  transition:color .2s ease-in-out; font-family:serif;
}
#leadGenForm #btn_overlayClose:hover div{ color:var(--brand-primary); }

/* Preloader */
.preloader{
  display:none; position:absolute; inset:0; background:rgba(255,255,255,.8);
  z-index:9999; align-items:center; justify-content:center; flex-direction:column;
}
.spinner{
  width:50px; height:50px; border:8px solid rgba(0,0,0,.1);
  border-top:8px solid var(--spinner-accent); border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.preloader p{ margin-top:10px; font-size:16px; color:#333; }

/* Selection, overlays, misc */
::-moz-selection{ background:var(--brand-primary); color:#fff; }
::selection{ background:var(--brand-primary); color:#fff; }
#leadGenFormOverlay{ z-index:500; position:fixed; inset:0; opacity:.7; display:none; }
#acknowledgement-screen, #request-success{ display:none; }

/* ================================
   Datepicker (restored full rules)
================================ */
.datepicker-container{
  font-family:'Montserrat',sans-serif;
  background-color:#fff;
  direction:ltr;
  font-size:12px;
  left:0;
  line-height:30px;
  position:absolute;          /* was: fixed */
  top:0;
  -ms-touch-action:none;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  width:210px;
  z-index:2000;               /* was: -1 */
  box-sizing:content-box;
}
.datepicker-container::before,
.datepicker-container::after{
  border:5px solid transparent;
  content:" ";
  display:block;
  height:0;
  position:absolute;
  width:0;
}

/* dropdown shell */
.datepicker-dropdown{
  border:1px solid #ccc;
  -webkit-box-shadow:0 3px 6px #ccc;
  box-shadow:0 3px 6px #ccc;
  -webkit-box-sizing:content-box;
  box-sizing:content-box;
  position:absolute;
  z-index:2001;
}

/* arrow positions */
.datepicker-top-left,
.datepicker-top-right{ border-top-color:#39f; }
.datepicker-top-left::before,
.datepicker-top-left::after,
.datepicker-top-right::before,
.datepicker-top-right::after{
  border-top:0;
  left:10px;
  top:-5px;
}
.datepicker-top-left::before,
.datepicker-top-right::before{ border-bottom-color:#39f; }
.datepicker-top-left::after,
.datepicker-top-right::after{
  border-bottom-color:#fff;
  top:-4px;
}

.datepicker-bottom-left,
.datepicker-bottom-right{ border-bottom-color:#39f; }
.datepicker-bottom-left::before,
.datepicker-bottom-left::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after{
  border-bottom:0;
  bottom:-5px;
  left:10px;
}
.datepicker-bottom-left::before,
.datepicker-bottom-right::before{ border-top-color:#39f; }
.datepicker-bottom-left::after,
.datepicker-bottom-right::after{
  border-top-color:#fff;
  bottom:-4px;
}
.datepicker-top-right::before,
.datepicker-top-right::after,
.datepicker-bottom-right::before,
.datepicker-bottom-right::after{
  left:auto;
  right:10px;
}

/* panels */
.datepicker-panel>ul{
  margin:0;
  padding:0;
  width:102%;
}
.datepicker-panel>ul::before,
.datepicker-panel>ul::after{ content:" "; display:table; }
.datepicker-panel>ul::after{ clear:both; }

.datepicker-panel>ul>li{
  background-color:#fff;
  cursor:pointer;
  float:left;
  height:30px;
  list-style:none;             /* remove bullets */
  margin:0;
  padding:0;
  text-align:center;
  width:30px;
}
.datepicker-panel>ul>li:hover{ background-color:#e5f2ff; }
.datepicker-panel>ul>li.muted,
.datepicker-panel>ul>li.muted:hover{ color:#999; }
.datepicker-panel>ul>li.highlighted{ background-color:#e5f2ff; }
.datepicker-panel>ul>li.highlighted:hover{ background-color:#cce5ff; }
.datepicker-panel>ul>li.picked,
.datepicker-panel>ul>li.picked:hover{ color:#39f; }
.datepicker-panel>ul>li.disabled,
.datepicker-panel>ul>li.disabled:hover{
  background-color:#fff;
  color:#ccc;
  cursor:default;
}
.datepicker-panel>ul>li.disabled.highlighted,
.datepicker-panel>ul>li.disabled:hover.highlighted{ background-color:#e5f2ff; }

.datepicker-panel>ul>li[data-view="years prev"],
.datepicker-panel>ul>li[data-view="year prev"],
.datepicker-panel>ul>li[data-view="month prev"],
.datepicker-panel>ul>li[data-view="years next"],
.datepicker-panel>ul>li[data-view="year next"],
.datepicker-panel>ul>li[data-view="month next"],
.datepicker-panel>ul>li[data-view="next"]{
  font-size:18px;
}
.datepicker-panel>ul>li[data-view="years current"],
.datepicker-panel>ul>li[data-view="year current"],
.datepicker-panel>ul>li[data-view="month current"]{
  width:150px;
}
.datepicker-panel>ul[data-view="years"]>li,
.datepicker-panel>ul[data-view="months"]>li{
  height:52.5px;
  line-height:52.5px;
  width:52.5px;
}
.datepicker-panel>ul[data-view="week"]>li,
.datepicker-panel>ul[data-view="week"]>li:hover{
  background-color:#fff;
  cursor:default;
}

.datepicker-inline{ position:static; }
.datepicker-hide{ display:none; }


/* Sign-in variant */
.sign-in #leadGenForm .form_section{ min-height:240px; }
.sign-in #leadGenForm form{ margin-top:8%; padding:50px 50px 20px; }
.sign-in #leadGenForm h1{ font-size:29px; margin-bottom:18px !important; color:var(--brand-primary); line-height:1.6; }
.sign-in #leadGenForm h2{ margin-bottom:5px; font-size:33px; font-weight:600; color:var(--brand-primary); letter-spacing:-0.03em; line-height:.6; }

/* ================================
   Media Queries
================================ */
/* 1024–1440 (shared tuning) */
@media (min-width:1024px) and (max-width:1440px){
  #heroImage{ height:65vh; padding-top:15vh; }
  #heroImage-layer2{ height:auto; }
  #heroImageContainerInner .footer{ width:70%; margin:auto; }
}

/* 768–1024 */
@media (min-width:768px) and (max-width:1024px){
  #heroImage{ height:70vh; padding-top:10vh; }
  #heroImage-layer2{ height:25vh; }
  .small{ font-size:2vh; line-height:1; }
  #heroImageContainerInner .footer{ width:70%; margin:auto; }
}

/* <= 767 (Mobile) */
@media (max-width:767px){
  .g-2{ margin:0; }
  .form_section .row{ margin-top:0; }
  .form_section .col-12, .form_section .col{ margin-top:1vh; }

  #leadGenFormWrapper{ display:flex; align-items:center; justify-content:center; padding-bottom:10vh; }
  #pageContainer{ display:block; height:auto; }

  #heroImageContainer{ position:relative; width:100%; height:auto; }
  #heroImageContainerInner{
    width:100%; height:55vh; /* keep hero visible on mobile */
    background-position: var(--hero-bg-position);
    background-size: var(--hero-bg-size);
  }
  #heroImage{ width:80%; height:auto; margin:auto; padding-top:4vh; }
  #heroImage-layer2{ position:absolute; height:25vh; width:auto; z-index:1; }
  #heroImageContainerInner .footer{ width:70%;}

  #leadGenForm h1{ font-size:3.5vh; line-height:4.5vh; }
  #formContainer{ display:block; width:100vw; margin-left:0; padding:20px; height:auto; }
  #formContainer-inner{ width:100%; max-width:100%; }
}