:root{
     --blueprimary: #035aa6;
     --redprimary: #dc1e5a;
     --greymain: #efefef;
     --orangeprimary: orange;
     --greenhover: #47a300;
     --borderradious: 6px;
     --grey: grey;
     --blueaccent: #0482f0;
     --redaccent: #ff3575;
     --greyaccent: rgba(214, 214, 214, 0.788);
     --orangeaccent: rgb(230, 152, 9);
     --shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.329);
 }

section{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 86%;
    overflow-x: auto;
}

.login-container{
     display: flex;
     flex-direction: column;
     height: 100%;
     padding: 0 10%; 
}

.login-left, .login-right{
     display: flex;
     flex-direction: column;
     width: 100%;
     justify-content:left;
}

h1{
     color: var(--redprimary);
     font-size: 2rem;
     text-align: left;
     margin: 0;
}

.conditions{
     width: 100%;
     font-size: 0.8rem;
     border: var(--grey);
     background-color: #efefef;
     padding: 0.6rem;
     border-radius: 6px;
     box-sizing: border-box;
}

.conditions h4{
     color: var(--redprimary);
     font-size: 0.8rem;
     text-align: center;
}

.login-container img{
    width: 50%;
}

.submitbtn{
    display: none;
    padding: 10px 50px;
    margin: 20px auto;
    background-color: var(--redprimary);
    color: white;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 40px;
    cursor: pointer;
    text-align: center;
}

.submitbtn:hover{
    background-color: var(--redaccent);
    color: white;
    transition: 0.3s;
}

.submitbtn:active{
     transform: scale(0.95);
     transform: 0.2s;
 }

#placement{
     visibility: hidden;
}

@media screen and (max-width:412px)
{
     .login-container{
          flex-direction: column;
          overflow-y: auto;
     }
     .login-left{
          width: 100%;
          order: 1;
     }
     .login-left h1{
          font-size: 1rem;
     }
     .login-right{
          width: 100%;
          order: -1;
     }
}

@media screen and (min-width:413px) and (max-width:767px)
{
     .login-container{
          flex-direction: column;
          overflow-y: auto;
     }
     .login-left{
          width: 100%;
          order: 1;
     }
     .login-left h1{
          font-size: 1rem;
     }
     .login-right{
          width: 100%;
          order: -1;
     }
}

/********************CONTAINER**********************/

.login-container_section_instruction{
     font-size: 1.1rem;
     color: var(--blueprimary);
     align-items: center;
}

.login-container_section_instruction span{
     display: inline-block;
     font-weight: bold;
     font-size: 1.3rem;
     background-color: var(--blueprimary);
     border-radius: 50%;
     color: white;
     width: 1.8rem;
     height: 1.8rem;
     text-align: center;
     vertical-align:middle;
}

/********************SECTION ONE**********************/

.formfield3{
     display: block;
}

.userExamOptions{
     display: flex;
     flex-flow: row wrap;
     gap: 8px;
}

.userExamOptions label{
     display: flex;
     overflow: hidden;
     font-weight: bold;
     text-align: center;
     align-items: center;
     justify-content: center;
     padding: 10px;
     width: 6rem;
     height: 6rem;
     background-color: var(--greyaccent);
     color: var(--grey);
     border-radius: 6px;
     cursor: pointer;
     position: relative;
}

.userExamOptions input{
     display: none;
}

.userExamOptions label:hover{
     color: var(--redaccent);
     transition: 0.3s;
}

.userExamOptions label:active{
     transform: scale(0.95);
     transform: 0.2s;
}

.userExamOptions input[type="radio"]:checked + label {
     position: relative; 
     color: white;
     background-color: var(--redprimary); 
     transition: 0.3s;
 }

.userExamOptions_minicont{
     margin-right: 2rem;
}

.userExamOptions_minicont h2{
     font-size: 1rem;
     color: var(--redprimary);
}


/****************************textSectionForm***************************/

.textSectionForm{
     display: flex;
     flex-flow: column;
     gap: 20px;
     width: 80%;
     align-items: center;
     margin: 0 auto;
}

.textSectionForm input {
     padding: 1%;
     width: 98%;
     text-align: center;
     font-size: 1.1rem;
     border-radius: 6px;
     border: 0.1px solid var(--grey);
}

.iti--allow-dropdown{
     display: flex;
     flex-flow: row nowrap;
     width: 100%;
     align-items: center;
     justify-content: space-between;
     margin: 0 auto;
}

.iti--allow-dropdown input{
     width: 95%;
}

.iti__flag-container{
     position: relative;
}


.textSectionForm .textInput{
     width: 100%;
     display: flex;
     flex-flow: row nowrap;
     gap: 20px;
     align-items: center;
     justify-content: center;
}

.textSectionForm .textInput input{
     width: 50%;
}

/*******************JS*******************/

#section2, #section3, #section4{
     height: 0;
     overflow: hidden;
}

/*******************CONDITIONS*******************/

.conditions_checkmark{
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     justify-content: center;
     font-size: 0.9rem;
     font-weight: bolder;
     color: var(--blueprimary);
     text-align: center;
     cursor: pointer;
}

.conditions_checkmark input[type=checkbox]{
     width: 1.2rem;
     height: 1.2rem;
     cursor: pointer;
     border-radius: 50%;
     margin-left: 0.5rem;
     appearance: none;
     background-color: white;
     border: 0.1px solid var(--blueaccent);
     position: relative;
}

.conditions_checkmark input[type=checkbox]:hover{
     box-shadow: var(--shadow);
     transform: scale(1.1);
     transition:0.2s;
}

.conditions_checkmark input[type=checkbox]:active{
     transform: scale(0.9);
     transition:0.2s;

}

.conditions_checkmark input[type="checkbox"]:checked {
     content: "\2713";
     color: white;
     background-color: var(--greenhover);
     border-color: var(--greyaccent);
}

.conditions_checkmark input[type="checkbox"]:checked::after {
     content: "\2713";
     font-size: 0.9rem;
     text-align: center;
     font-weight: bolder;
     color: white;
     position: absolute;
     left: 50%; 
     top: 50%; 
     transform: translate(-50%, -50%);
}

.conditions_checkmark:has(input[type="checkbox"]:checked) label {
     color: var(--greenhover);
 }

/*WHATS INCLUDED*/

 #whats_included_container{
     display: none;
     padding: 1rem;
     background-color: var(--greymain);
     border-radius: var(--borderradious);
     font-size: 0.9rem;
     width: 100%;
 }

 @keyframes opacityChange {
     from {opacity: 0}
     to {opacity: 1}
   }

 #whats_included_container ul{
     list-style: none;
     margin: 0;
     padding: 0; 
 }

 #whats_included_container ul li{
     margin-bottom: 1rem;
 }

 #whats_included_container ul strong{
     color: var(--grey);
 }

 #whats_included_container ul .price{
     font-weight: bold;
     font-size: 1.1rem;
     background-color: var(--grey);
     color: white;
     padding: 0.8rem;
     border-radius: 40px;
     width: fit-content;
 }
 
 .formfield.formdiscount {
     width: 100%;
     padding: 12px 15px;
     font-size: 16px;
     font-weight: bold;
     letter-spacing: 0.5px;
     outline: none;
     background: #ffffff;
     color: var(--blueprimary);
     transition: all 0.3s ease-in-out;
     box-sizing: border-box;
 }
 
 .formfield.formdiscount:focus {
     border-color: var(--blueprimary);
     box-shadow: 0 0 8px #035aa68c;
 }
 
 /* Placeholder con estilo elegante */
 .formfield.formdiscount::placeholder {
     opacity: 0.7;
     font-weight: normal;
     transition: color 0.3s ease-in-out;
 }
 
 /* Cambia el placeholder cuando el usuario escribe */
 .formfield.formdiscount:focus::placeholder {
     color: #035aa68c;
     opacity: 0.5;
 }

 .discountcouponinstruction{
     width: 100%;
     display: flex;
     flex-flow: row wrap;
     align-items: center;
     justify-content: center;
     margin-bottom: -12px;
 }

 .discountcouponinstruction img{
     width: 2.5rem;
     margin-right: 1rem;
 }
 
 .discountcouponinstruction p{
     background-color: var(--greymain);
     padding: 6px;
     border-radius: 6px;
 }

 .discountbox{
     display: flex;
     flex-flow: row nowrap;
     width: 100%;
 }

 .discountbox input{
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }

 .discountbox div{
     background-color: var(--blueprimary);
     display: flex;
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     text-align: center;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
     color: white;
     padding: 6px;
 }

 .discountbox div:hover{
     border-color: var(--blueprimary);
     box-shadow: 0 0 8px #035aa68c;
     transform: scale(1.03);
     transition: 0.2s;
 }

 .discountbox div:active{
     transform: scale(0.9);
 }

 /*MESSAGE BOX*/

#messagebox{
     position: fixed;
     top: 1%;
     right: 2%;
     z-index: 2000;
     display: flex;
     flex-flow: column;
     max-width: 50%;
 }
   
 #messagebox .loginmessage{
     padding: 15px 30px;
     margin: 3px;
     background-color: var(--greymain);
     color: var(--blueprimary);
     border-radius: 4px;
     border: solid 1px var(--blueprimary);
     box-shadow: 0px 0px 1px rgba(3, 7, 18, 0.02),  0px 0px 4px rgba(3, 7, 18, 0.04),  0px 0px 9px rgba(3, 7, 18, 0.06), 0px 0px 15px rgba(3, 7, 18, 0.08),  0px 0px 24px rgba(3, 7, 18, 0.10);
 }
  
.paytotal{
     display: flex;
     flex-flow: row wrap;
     align-items: center;
     justify-content: center;
     margin: 0;
     padding: 0;
     width: 100%;
     /*background-color: var(--greymain);*/
     border-radius: 5px;
     color: var(--blueprimary);
     /*border: 1px solid var(--blueprimary);*/
}

.paytotal p{
     padding: 0;
     font-weight: bold;
}