.formWrapper {
    width: 100%;
}

.formWrapper #affitrade_form form .first-step,
.formWrapper #affitrade_form form .second-step,
.formWrapper #affitrade_form form .third-step {
    display: flex;
    flex-direction: column;
}

.formWrapper #affitrade_form form .show {
    display: flex;
}

.formWrapper #affitrade_form form .hide {
	display: none !important;
}

.formWrapper #affitrade_form form .second-step.hide {
	display: none !important;
}

.hero-section>.container {
    align-items: center;
}

.formWrapper #affitrade_form .inputbox {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.formWrapper #affitrade_form .inputbox label {
    flex-basis: auto;
    margin-bottom: 13px;
    color: #111;
    font-family: Inter;
    font-size: 14px;
    font-weight: 400;
}

.formWrapper #affitrade_form .inputbox>div.iti {
    width: 100%;
}


.iti__country-list {
    width: 350px;
}

#affitrade_form a.back,
#affitrade_form button.back {
    border: 1px solid rgba(0, 0, 0, 0.24) !important;
    background-color: white !important;
    color: #09072C !important;
    margin-top: 8px;
}

#affitrade_form #show-number {
    color: rgba(17, 17, 17, 0.60);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 24px;
}

#enterCode {
	margin-top: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}




.checkbox-wrapper {
    display: flex;
    gap: 9px;
    margin: 12px 0;
}

.checkbox-wrapper img {
    width: 24px;
    height: 24px;
}

#affitrade_form .checkbox-wrapper span,
#affitrade_form .checkbox-wrapper span a {
    width: calc(100% - 24px - 9px);
    color: #111;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 100% !important;
    background-color: transparent !important;
}

#affitrade_form .checkbox-wrapper span a {
    color: #1662FF !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.firstStepTip {
    color: rgba(17, 17, 17, 0.60);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
}

#affitrade_form #resendCode {
	font-family: var(--font-inter);
}

.formWrapper #affitrade_form .inputbox.passwordField .note {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

.formWrapper #affitrade_form .inputbox.passwordField .note .inputWrapper {
    position: relative;
    width: calc(100% - 160px - 12px);
}

.formWrapper #affitrade_form .inputbox.passwordField .note .inputWrapper.visible::after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    background-color: #000;
}

.formWrapper #affitrade_form .inputbox.passwordField .note .inputWrapper input {
    padding-right: 50px;
}

.formWrapper #affitrade_form .inputbox.passwordField .note .inputWrapper img {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    cursor: pointer;
}

.formWrapper #affitrade_form .inputbox.passwordField .note #generatePassBtn {
    width: 160px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {
    .formWrapper {
        padding: 16px;
    }
}

element.style {
}
.styles_baseButtonWhite__nmhG6 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(0 85 251 / var(--tw-text-opacity));
}
.styles_baseButtonLg__YOTzf {
    height: 56px;
}
.styles_baseButton__i5NAD {
    display: flex;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--font-roobert);
    opacity: 1;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    animation-duration: 300ms;
}
.\!text-black {
    --tw-text-opacity: 1 !important;
    color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
}
.styles_itemWrapper__orEBw {
    display: flex;
    height: 82px;
    width: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(225 227 233 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    text-align: center;
    font-family: var(--font-inter);
    font-size: 18px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}
.styles_inputStyled___BltA {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: #06122F;
}
.styles_fieldWrapper__iiKOc {
    margin-bottom: 12px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(225 227 233 / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.styles_fieldWrapper__iiKOc:focus-within {
	border-color: #0055FB;
}
#frm_pass {
	color: #06122F;
}
#regFrmBtn {
	margin-top: 36px;
}
#passwordTypeChange {
	width: 24px;
    height: 24px;
    top: 16px;
    right: 16px;
    position: relative;
    cursor: pointer;
	display: flex;
}
#frm_country {
	color: #06122F;
}

#frm_phone {
	color: #06122F;
}
.grey {
	color: #7E8593;
}
.green {
	color:#2EAF28 !important;
}
.wrong {
	border-color: red !important;
}
#applySuggestion {
    margin-left: 5px;
}
.form-group {
    position: relative;
  }


.form-group label {
    position: absolute;
    top: .5rem;
    left: 1.25rem;
    font-size: 11px;
    line-height: 14px;
    color: #6c757d;
    pointer-events: none;
    z-index: 10;
}

.form-group .placeholder {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #c4c4c4;
    pointer-events: none;
}

.form-group input:focus + label + .placeholder,
.form-group input:not(:placeholder-shown) + label + .placeholder {
    display: none;
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(255 0 0 / var(--tw-text-opacity));
}

.font-medium {
    font-weight: 500;
}
.text-\[10px\]\/\[14px\] {
    font-size: 10px;
    line-height: 14px;
}
.mt-\[3px\] {
    margin-top: 3px;
}
#error-message {
    margin-top: -9px;
    margin-bottom: 12px;
}
#raw_birthday {
    padding-top: 24px!important;
    padding-bottom: 12px!important;
    padding-left: 20px!important;
}
.flex-important {
    display: flex !important;
}
/* Container to control label position */
.floating-label {
    position: relative;
  }
  
  /* Label base state */
  .floating-label label {
    position: absolute;
    left: 20px;
    top: 8px;
    color: #727272; /* Tailwind gray-500 */
    font-size: 11px;
    pointer-events: none;
    transition: 0.2s ease all;
    padding: 0px;
    border: none!important;
  }
  
  
  /* Optional: consistent input spacing */
  .floating-label input {
    padding: 18px 16px;
    font-size: 16px;
  }
#step1-errorbox {
    margin-top: 12px;
    color: #EE3C3B;
}
.second-step {
    text-align: center;
}


/* Hide the native system checkbox */
#consent {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
  }
  
  /* Checked state — green background + custom white checkmark */
  #consent:checked {
    background-color: #22c55e!important; /* green */
    border-color: #22c55e;
  }
  
  
  /* Validation color states */
  #consent.input-error {
    border-color: #ef4444; /* red */
  }
  #consent.input-valid {
    border-color: #22c55e; /* green */
  }
  
  /* Wrapper outline (optional, for stronger highlight) */
  .consent-error,
  .field.consent-error {
    outline: 2px solid #ef4444;
    outline-offset: 4px;
    border-radius: 10px;
  }
  .consent-valid,
  .field.consent-valid {
    outline: 2px solid #22c55e;
    outline-offset: 4px;
    border-radius: 10px;
  }