@import "../fonts/opensans/open-sans.css";

:root{
  --navy:#1C355E;           
  --navy-80:#1b3d66;
  --muted:#7c8a99;
  --bg:#fff;
  --radius:10px;
  --border:1.5px;
  --gap:20px;
  --focus:#2a6df5;
  --red:#E52B38;         
}

#wpadminbar,
.otgs-development-site-front-end {
    display: none;
}
body {
  font-size: 1rem!important;
  color: var(--navy)!important;
  font-family: "Open Sans", sans-serif !important;
}
.logo-left {
    width: 80%;
    height: auto;
}
.error-box {
    color: var(--red)!important;
    font-size: 0.75rem!important;
}
.small-text {
    font-size: 0.85rem!important;
}
.submitButton,
.btn-primary {
  color: white!important;
  background-color:  var(--navy)!important;
  border-color: var(--navy)!important;
  border-radius: 70px!important;
  padding: 10px 20px!important;
}
.btn-primary:hover {
    background-color: white!important;
    color: var(--navy)!important;
}
.btn-secondary {
  color: white!important;
  background-color:  var(--red)!important;
  border-color: var(--red)!important;
  border-radius: 70px!important;
  padding: 10px 20px!important;
}
.btn-secondary:hover {
    background-color: white!important;
    color: var(--red)!important;
}
.btn-secondary:hover svg path {
  stroke: var(--red);
}
.btn-white {
  color: var(--navy)!important;
  background-color:  white!important;
  border-color: white!important;
  border-radius: 70px!important;
  padding: 10px 20px!important;
}
.btn-white:hover {
    background-color: var(--navy)!important;
    color: white!important;
}
.btn-white svg path {
  stroke: var(--navy);
}
.btn-white:hover svg path {
  stroke: white;
}
.btn-icon {
  display: inline-flex!important;
  align-items: center!important;
}
.menu-item svg,
.btn-icon svg {
    float: right;
}
.gm-style .gm-style-iw-d .txt-after-in-map p {
  color: #FF9EA3!important;
  font-weight: 600;
  text-align: center!important;
}
.fw-bold {
  font-weight: 600;
}
.top-banner {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 600px;
}
.font-bebas-neue-bold {
  font-family: 'bebas-neue-by-fontfabric', sans-serif!important;
  font-weight: 700!important;
}
.fw-bold h3, h2 ­{
    font-weight: 700!important;
}
.white-box {
    background-color: white;
    box-shadow: 0px 3px 12px 0px #00000012;
    border-radius: 10px;
    margin-top: -110px;
}
.white-small-box {
    background-color: white;
    border-radius: 10px;
}
.primary-title {
  color: var(--navy)!important;
}
.menu-box {
    border-radius: 30px;
    padding: 8px;
    background-color: #1C355E33;
    color: var(--navy);
    display: inline-block;
}
.menu-item {
  border-radius: 70px;
  padding: 8px 32px;
   display: inline-flex!important;
  align-items: center!important;
  cursor: pointer;
}
.active-menu-item {
  color: white!important;
  background-color:  var(--navy)!important;
  border-color: var(--navy)!important;
}
.menu-item svg {
    margin-left: 10px;
    width: 39px;
}
.grey-box .title-icon svg path,
.menu-item svg path {
   fill: var(--navy);
}
.active-menu-item svg path {
   fill: white;
}
.violet-box {
    background-color: #53638C;
    border-radius: 20px;
    color: white;
}
.grey-box {
    background-color: #EBECED;
    border-radius: 20px;
    color: var(--navy);
}
.grey-box .title-icon svg {
    width: 50px;
}
.notice-box {
    border: 1px solid var(--navy);
    border-radius: 10px;
    background-color: #1C355E1A;
    font-size: 0.75rem!important;
}
.steps .notice-box p {
    margin-bottom: 0;
    margin-left: 5px;
}
.practical-case .notice-box p {
    margin-bottom: 5px;
}
.red-title {
  color: #FF9EA3!important;
}

.calc-form{
  color: var(--navy);
  max-width: 900px;
}

.fields-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.result-step-1 svg {
  position: absolute;
  transform: translateX(-50%);
  transition: 0.8s;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
}

.circle-green {
  background-color: #2DAC41;
}

.circle-yellow {
  background-color: #F5D146;
}

.circle-orange {
  background-color: #EE671B;
}

.circle-red {
  background-color: #BC0321;
}

.no-risk svg {
  transform: rotate(196deg);
  bottom: 105px;
  left: 31%;
}

.moderate-risk svg {
  transform: rotate(249deg);
  bottom: 125px;
  left: 35%;
}

.severe-risk svg {
  transform: rotate(300deg);
  bottom: 125px;
  left: 42%;
}

.very-severe-risk svg {
  transform: rotate(349deg);
  bottom: 104px;
  left: 50%;
}

.no-risk h4 {
  color: #2DAC41!important;
}

.moderate-risk h4 {
  color: #F5D146!important;
}

.severe-risk h4 {
  color: #EE671B!important;
}

.very-severe-risk h4 {
  color: #BC0321!important;
}

#indicator-text {
  font-size: 1.3rem!important;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 0!important;
}
@media (max-width: 720px){
  .fields-row{ grid-template-columns: 1fr; }
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.input-wrap{
  position:relative;
}

.field-label{
  position:absolute;
  top:-10px;               /* sits on the top border */
  left:14px;
  background:var(--bg);
  padding:0 8px;
  font-size:12px;
  color: var(--navy);
  z-index:1;
}

.input-wrap input{
  width:100%;
  height:46px;
  padding:10px 36px 10px 12px; /* room for clear btn */
  border:var(--border) solid var(--navy);
  border-radius: var(--radius);
  outline:none;
  color:var(--navy);
  font-size:14px;
  background:var(--bg);
}

/* small notch cue (rounded corner hint) */
.input-wrap input{
  /* Optional: slightly different radius on top-left to mimic the “notch-ish” look */
  border-top-left-radius: 12px;
}

/* placeholders similar to screenshot */
.input-wrap input::placeholder{
  color:#9a9fa6;
  opacity:1;
}

.input-wrap input:focus{
  border-color: var(--navy-80);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}

.clear-btn{
  position:absolute;
  right:8px;
  top:50%;
  translate: 0 -50%;
  height:28px;
  width:28px;
  border-radius:50%;
  border:0;
  background:transparent;
  color:var(--navy);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.clear-btn:hover{
  background:#eef3f8;
}

/* Radio group */
.radio-group{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:10px;
  border:0;
  padding:0;
}

.radio{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
  color:var(--navy);
  font-size:14px;
}

.radio input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.radio .fake{
  width:18px;
  height:18px;
  border:var(--border) solid var(--muted);
  border-radius:4px;        /* square look like screenshot */
  background:#fff;
  display:inline-block;
  position:relative;
}

.radio input:checked + .fake{
  border-color: var(--navy);
  background:#fff;
}

.radio input:focus-visible + .fake{
  outline:3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset:2px;
}

/* “tick” for radios – small filled square */
.radio input:checked + .fake::after{
  content:"";
  position:absolute;
  inset:3px;
  background: var(--navy);
  border-radius:2px;
}

/* Actions */
.actions{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:16px;
}

.link-reset{
  background:none;
  border:0;
  color: var(--muted);
  padding:0;
  font-size:14px;
  text-decoration:underline;
  cursor:pointer;
}

.link-reset:hover{
  color: var(--navy);
}
footer {
    background-color: var(--navy)!important;
    border-bottom: none!important;
    padding: 0!important;
}

.benefits__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 50%;
}

.benefits svg {
  width: 50%;
  display: block;
  margin: auto;
}

.benefits__icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.benefits__title {
  color: var(--navy);
  font-weight: 700;
  font-size: 1.25rem!important;
  line-height: 1.2;
  margin: 0;
}
.gm-style .gm-style-iw-c {
  min-width: 280px!important;
  color: var(--navy)!important;
  font-size: 1rem!important;
}
.gm-style .gm-style-iw-c p {
 margin-bottom: 5px!important;
 color: var(--navy)!important;
}
.fs-16 {
    font-size: 1rem!important;
}
.social-link svg {
  float: left;
}
.cursor-pointer {
  cursor: pointer;
}
.border-bottom-white {
  border-bottom: 1px solid #556786;
}
h2 {
      font-size: 2rem!important;
}
h3 {
    font-size: 1.8rem!important;
}
.custom-country-dropdown {
      margin-top: 11px;
    margin-bottom: 11px;
}
.phoneFormFieldBlock input,
.cdp-form-block input, .cdp-form-block select {
  padding: 11px 20px !important;
  color: var(--navy)!important;
  background-color: white !important;
  border: 1px solid #C6CCD7!important;
}
.consentBlock label p,
.cdp-form-block textarea {
  color: var(--navy)!important;
}
.cdp-form-block .phoneFormFieldBlock label, .cdp-form-block .textFormFieldBlock label, .optionSetFormFieldBlock label {
  display: none !important;
}
.cdp-form-block .textFormFieldBlock:has(textarea) label {
  display: inline-block !important; 
  color: var(--navy)!important;
}
.inner.ui-sortable {
    padding: 0!important;
}
.cdp-form-block input::placeholder {
  color: var(--navy)!important;      
  opacity: 1;       
}

.cdp-form-block textarea::placeholder {
  color: var(--navy)!important;
  opacity: 1;
}
@media (min-width: 992px) {
  .menu-box {
    border-radius: 70px;
  }
  .steps .notice-box p {
      display: inline-block;
  }
    .logo-left {
        height: 70px;
        width: auto;
    }
    .top-bar.px-lg-8 {
        padding-left: 6rem!important;
        padding-right: 6rem!important;
    }
    h1 {
        font-size: 4.375rem!important;
    }
     h2 {
        font-size: 3.125rem!important;
    }
    h3 {
        font-size: 2.25rem!important;
    }
    .fs-18 {
        font-size: 1.125rem!important;
    }
    .container-custom {
        max-width: 1350px;
        min-width: 320px;
        width: 100%;
        margin: auto;
    }
}
@media (max-width: 991px) {
  .btn-sm-mobile {
    padding: 0.625rem 0.7rem!important;
    font-size: 0.875rem!important;
  }
  .container.menu-section {
    padding-right: 15px!important;
    padding-left: 15px!important;
  }
  .menu-item {
    width: 100%;
    justify-content: center;
  }
  .border-top-white-mobile {
    border-top: 1px solid #556786;
  }
  .d-block-mobile {
    display: block;
  }
}