.custom-checkbox {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  position: relative;
}

/* Hide Checkbox */
.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.custom-checkbox label {
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #A975F8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: transparent;
  position: relative;
  line-height: 150%;
}

/* Checked Style */
.custom-checkbox input[type="checkbox"]:checked + label {
  background: linear-gradient(135deg, #66bb6a, #4dd0e1);
  border: none;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

/* Check Icon */
.custom-checkbox input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 15px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxOSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNTA3ODEgNi4zMDg1OUw1LjU3NDE3IDEyLjQ3MjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik01LjU0Mjk3IDEyLjU4NEwxNi44MDM2IDEuNDg4OTEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat center;
  background-size: contain;
}

.custom-checkbox .pseudo-label {
    color:#7C7C7C;
    font-size: 16px;
    line-height: 34px;
}

/* CHECKBOX UP */

.multistep-form {
    font-family: 'Poppins', sans-serif;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    outline: none !important;
}

.ms-title {
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
}

.ms-title h2 {
    font-size: 38px;
    font-weight: 600;
    color:#6B60AD;
    line-height: 48px;
}

.ms-content h3 {
    font-size: 20px;
    line-height: 11px;
    color: #6B60AD;
    margin-bottom: 25px;
    font-weight: 600;
}

.ms-content p {
    color:#7C7C7C;
    font-size: 14px;
    line-height: 23px;
}

a.bt-submit {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    background-color: #8367C8 !important;
    color: #FFFFFF !important;
    border-style: none !important;
    border-radius: 36px !important;
    box-shadow: 2.78px 2.78px 0px 0px #71C9EC !important;
    padding: 18px 70px 18px 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

a.bt-submit:hover {
    color: #FFFFFF !important;
    background: #A975F8 !important;
}
a.bt-submit:active {
    margin: 2px -2px 0 0;
    box-shadow: none !important;
}

a.bt-schedule:hover {
    color: #FFFFFF !important;
    background: #A975F8 !important;
}
a.bt-schedule:active {
    margin: 2px -2px 0 0;
    box-shadow: none !important;
}

a.bt-submit.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ms-form {
    background: #A7ACDD;
    padding: 0 0 200px 0;
    margin-bottom: -150px;
}


.ms-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 74px;
  background-color: #E9E9F6;
  position: relative;
  overflow: hidden;
}

/* Pseudo-elemento único que representa o progresso */
.ms-tabs::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(-79deg, #81e5f799, #a975f899);
  z-index: 1;
  transition: all 0.3s ease;
}

/* Etapa 1: apenas a primeira aba */
.ms-tabs.tostep-1::before {
  width: 33.33%;
  border-radius: 0 30px 30px 0;
}

/* Etapa 2: duas primeiras abas */
.ms-tabs.tostep-2::before {
  width: 66.66%;
  border-radius: 0 30px 30px 0;
}

/* Etapa 3: todas as abas */
.ms-tabs.tostep-3::before {
  width: 100%;
  border-radius: 0; /* sem arredondamento */
}

/* Estilo das abas */
/* Estilo padrão (não concluído) */
.ms-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #A7ACDD;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
}

/* Estilo padrão (não concluído) */
.ms-tab .ms-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  color: #FFFFFF;
  background: #A7ACDD;
  margin-right: 5px;
}

/* tostep-1: só a aba 1 está ativa */
.ms-tabs.tostep-1 .ms-tab[data-step="1"] {
  color: #FFFFFF;
}
.ms-tabs.tostep-1 .ms-tab[data-step="1"] .ms-circle {
  background: #FFFFFF;
  color: #BDA1F7; /* Cor da aba 1 */
}

/* tostep-2: abas 1 (concluída) e 2 (ativa) */
.ms-tabs.tostep-2 .ms-tab[data-step="1"],
.ms-tabs.tostep-2 .ms-tab[data-step="2"] {
  color: #FFFFFF;
}
.ms-tabs.tostep-2 .ms-tab[data-step="1"] .ms-circle {
  background: #FFFFFF;
  color: #BDA1F7; /* Cor da aba 1 */
}
.ms-tabs.tostep-2 .ms-tab[data-step="2"] .ms-circle {
  background: #FFFFFF;
  color: #BABAF7; /* Cor da aba 2 */
}

/* tostep-3: todas as abas concluídas/ativas */
.ms-tabs.tostep-3 .ms-tab[data-step="1"],
.ms-tabs.tostep-3 .ms-tab[data-step="2"],
.ms-tabs.tostep-3 .ms-tab[data-step="3"] {
  color: #FFFFFF;
}
.ms-tabs.tostep-3 .ms-tab[data-step="1"] .ms-circle {
  background: #FFFFFF;
  color: #BDA1F7; /* Cor da aba 1 */
}
.ms-tabs.tostep-3 .ms-tab[data-step="2"] .ms-circle {
  background: #FFFFFF;
  color: #BABAF7; /* Cor da aba 2 */
}
.ms-tabs.tostep-3 .ms-tab[data-step="3"] .ms-circle {
  background: #FFFFFF;
  color: #AAE6F7; /* Cor da aba 3 */
}

.ms-twocol {
    display: grid;
    grid-template-columns: 65% 1fr;
    gap: 40px;
}


.ms-right  {
    display: flex;
    align-items: center;

}

.ms-header {
    margin-bottom: 10px;
}

.ms-header span {
    text-transform: uppercase;
    color:#A7ACDD;
    font-weight: 700;
    letter-spacing: 1px;
}

.ms-title h2 span {
    color:#39C2E2;
}

.ms-subtitle {
    margin-bottom: 60px;
}

.ms-subtitle h3 {
    font-weight: 400;
    color:#57529B;
}

.step {
    background: #F4F7FF;
    border-radius:0 0 30px 120px ;
    padding: 60px 80px;
    margin-bottom: 40px;
    position: relative;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; 
    transform: translateX(0);  
    overflow: hidden; 
}

.toSlide {
        position: relative;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; 
    transform: translateX(0);  
}

.slide-left {
    transform: translateX(-100%); /* Move the element out of view to the left */
}

.slide-right {
    transform: translateX(100%); /* Move the element out of view to the right */
}

.from-left {
    transform: translateX(-100%); /* Immediately place the element out of view on the left */
}

#form_part2,
#form_part3,
#form_part4 {
    display: none;
}

/* STEP 1 */

.step-1 .ms-title {
    margin-bottom: 10px;
}

.ms-submit-color {
    text-align: right;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.ms-submit-color a.bt-submit {
    padding:18px 40px 18px 40px !important;
    width: fit-content;
    font-size: 20px !important;
    letter-spacing: 1px !important;
}

.step-1 .bottom {
    margin-top: 60px;
}

.step-1 .bottom .step-item {
    display: flex;
    align-items: center;
}

.step-1 .minimal-text {
    border-top:solid 1px #E9E9F6;
    margin-top: 40px;
    padding-top: 20px;
}

.step-1 .minimal-text h3 {
    font-weight: 600;
    font-size: 13px;
    color:#918CC5;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.step-1 .minimal-text p {
    color:#918CC5;
    font-size: 13px;
    letter-spacing: 1px;
}

.step-1 .ms-physical-copy {
    border-radius: 30px;
    margin:20px 0 30px 0;
    transition: all ease .2s;
}
.step-1 .ms-physical-copy.active {
    border: solid 1px #E9E9F6;
    padding: 30px 20px;
}

.step-1 .ms-item-threecol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.step-1 .custom-checkbox {
    margin-top: -45px;
    background: #F4F7FF;
    width: fit-content;
    padding: 0 10px;
}


/* STEP 2 */

.step-2 .ms-content {
    padding: 30px 0 0 0;
}

.diagnosed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 55%;
}

.prescribed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 72%;
}

.diagnosed-grid a,
.prescribed-grid a {
    background: #FFFFFF;
    display: flex;
    align-items: center;
    border-radius: 35px;
    font-size: 20px;
    color:#676767;
    font-weight: 500;
    padding:22px 22px;
    text-decoration: none;
    transition: all ease .2s;
}

.diagnosed-grid a svg,
.prescribed-grid a svg {
    margin-right: 20px;
}

.diagnosed-grid a:hover,
.diagnosed-grid a.selected,
.prescribed-grid a:hover,
.prescribed-grid a.selected {
    color: #FFFFFF !important;
    background: #57529B;
}

.diagnosed-grid a:hover path,
.diagnosed-grid a.selected path,
.prescribed-grid a:hover path,
.prescribed-grid a.selected path {
    stroke: #FFFFFF;
} 

.diagnosed-check,
.prescribed-check {
    display: none;
}

.form-diagnosed {
    padding-bottom: 30px;
}

.form-prescribed {
    /*display: none;*/
    border: solid 1px #DAD9EE;
    border-radius: 30px;
    padding:80px 30px 0 20px;
    margin:-65px 0 50px -20px;
    width: fit-content;
}

.form-prescribed h3 {
    display: flex;
}

.form-prescribed h3 .text {
    margin-left: 30px;
    line-height: 26px;
}

.form-prescribed h3 span {
    color: #A975F8;
}

.form-prescribed .disclaimer {
    font-size: 16px;
    color:#7C7C7C;
    margin-top: 10px;
    margin-bottom: 20px;
    letter-spacing: 1px;
    line-height: 20px;
}

.additional-info {
    padding: 0 20px;
}

.additional-info .info-link {
    display: flex;
    align-items: center;
    color: #57529B;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    text-decoration: none;
    margin-left: -20px;
    margin-bottom: 20px;
}

.additional-info .info-link svg {
    margin-right: 5px;
}

.rls-title {
    color:#6B60AD;
    font-size:20px;
    font-weight: 500;
    margin-bottom: 30px;
}

.rls-title span {
    color:#009DCE;
}

.step-2 input[type=checkbox] + label.agree-sms a {
    font-weight: 600;
    color: #7C7C7C;
    text-decoration: underline;
}

.step-2 .pseudo-label {
    font-size: 12px;
    color:#7C7C7C;
    line-height: 150%;
    margin-bottom: 10px;
}

.step-2 .pseudo-label a {
    color:#7C7C7C;
    font-weight: 700;
}

.step-2 .disclaimer {
    font-size: 16px;
    color: #7C7C7C;
    letter-spacing: 1px;
    margin:5px 0 50px 10px;
}

.step-2 .custom-checkbox {
    margin-top: 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ms-item {
    width: 100%;
    background: #FFFFFF;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    border: solid 3px #FFF;
}


.ms-item label {
    padding: 25px 25px 25px 40px;
    margin: 0 !important;
    display: flex;
}


.ms-item input,
.ms-item select {
    width: 100%;
    border: none;
    padding: 25px 0;
    font-size: 20px;
    letter-spacing: 1px;
    color: #57529B !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 30px;
    outline: none;
    background: transparent;
}

.ms-item input ::placeholder {
    color: #A4A4A4 !important;
}

.ms-item.approved {
    border: solid 3px #97DA94;
}

.ms-item.approved label {
    position: relative;
}

.ms-item.approved label::before {
    content: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7442 0.431487C16.3343 -0.149898 17.2839 -0.142858 17.8653 0.447112C18.4467 1.03722 18.4398 1.98677 17.8497 2.56821L6.58895 13.6629C5.99884 14.2444 5.04929 14.2374 4.46785 13.6473C4.27197 13.4484 4.14356 13.2086 4.08114 12.9559L0.248128 7.14535C-0.208029 6.45389 -0.0174803 5.52345 0.67391 5.06723C1.36534 4.61109 2.29579 4.80169 2.75203 5.49301L5.84578 10.1834L15.7442 0.431487Z' fill='white'/%3E%3C/svg%3E");
    position: absolute;
    top: 23px;
    left: 39px;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 22px;
    line-height: 36px;
    color: #FFFFFF;
    background: linear-gradient(135deg, #66bb6a, #4dd0e1);
    background-size: contain;
    z-index: 1;
    border-radius: 20px;
}

.ms-item.error {
    border: solid 3px #F08080;
}

.ms-item.error label::before {
    content: '✖';
    position: absolute;
    top: 23px;
    left: 39px;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 22px;
    line-height: 34px;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    background-size: contain;
    z-index: 1;
    border-radius: 20px;
}

.ms-header span.gradient-text {
    background: linear-gradient(to right, #A975F8, #39C2E2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    display: inline-block;
    text-transform: capitalize;
}

/* STEP 3 */ 

.step-3 .ms-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.step-3 .ms-title {
    margin-bottom: 10px;
}

.step-3 .ms-subtitle {
    color: #7C7C7C;
}

.ms-qualified,
.ms-notqualified {
    display: none;
}

.step-3 .ms-title h2 {
    width: 100%;
    text-align: center;
}

.step-3 .ms-subtitle {
    font-size: 20px;
}

.step-3 .ms-header svg {
    margin:0 auto 30px auto;
}

.step-3 .ms-schedule {
    display: grid;
    grid-template-columns: 1fr;
    border:solid 1px #DAD9EE;
    border-radius: 30px;
    padding: 35px;
    margin-bottom: 50px;
}

.step-3 .ms-schedule .schedule-item {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 30px;
    align-items: center;
    padding: 20px 0;
}

.step-3 .ms-schedule .schedule-item span {
    color: #7C7C7C;
    font-size: 18px;
    letter-spacing: 1px;
}

.step-3 a.bt-submit {
    padding:16px 30px 16px 30px !important;
}

.step-3 a.bt-submit svg {
    width: 35px;
    height: auto;
    margin-right: 10px;
}

.ms-help {
    display: grid;
    grid-template-columns: 100px 1fr;
    background: #FFFFFF;
    color: #7C7C7C;
    padding: 45px 35px;
    border-radius: 30px;
    margin-bottom: 30px;
    font-size: 18px;
}

.ms-help a {
    color:#57529B;
    text-decoration: underline;
    font-weight: 700;
}

.step-3 .disclaimer {
    font-size: 14px;
    letter-spacing: 1px;
    color: #7C7C7C;
}

/* iPad Pro 1024px */
@media (max-width: 1024px) {

.diagnosed-grid {
    width: 70%;
}

}

/* Tablet & Mobile (max-width: 820px) */
@media (max-width: 820px) {

.step {
    padding: 60px 30px;
}

.info-grid {
    grid-template-columns: 1fr;
}

.ms-twocol {
    grid-template-columns: 55% 1fr;
}

.diagnosed-grid,
.prescribed-grid {
    width: 100%;
}

}

/* iPad Mini (max-width: 768px) */
@media (max-width: 768px) {

.ms-twocol {
    grid-template-columns: 47% 1fr;
}


}

/* Mobile (max-width: 500px) */
@media (max-width: 500px) {

.step {
    padding: 60px 20px;
    border-radius: 0 0 30px 60px;
}

.ms-tabs {
    display: none;
}

.ms-twocol,
.step-1 .ms-item-threecol,
.diagnosed-grid,
.prescribed-grid,
.schedule-item {
    grid-template-columns: 1fr;
}

.form-prescribed {
    margin: -65px 0 50px 0;
}

.ms-submit-color a.bt-submit {
    padding: 18px 25px 18px 25px !important;
}

.step-3 .ms-schedule {
    padding: 20px;
}

.step-3 .ms-schedule .schedule-item {
    grid-template-columns: 1fr;
}

.ms-left {
    width: 90%;
}

}

/* Mobile (max-width: 375px) */
@media (max-width: 375px) {

.ms-left {
    width: 85%;
}

.ms-submit-color a.bt-submit {
    padding:18px 15px 18px 15px !important;
}
    
}
