.main-header {position: relative; }
.signup-wrapper { margin: 60px auto; background: #1A171780; border: 1px solid #403F3F99; border-radius: 20px; padding: 50px; max-width: 850px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.9), 0 -3px 15px rgba(255, 255, 255, 0.08) inset, 0 3px 15px rgba(255, 255, 255, 0.05) inset; }
.signup-wrapper .prev-btn svg.bi {display: inline; }
.signup-wrapper .prev-btn:hover {background-color: #6fa744; }
.signup-wrapper .step-progress {display: flex; justify-content: space-between; margin-bottom: 40px; counter-reset: step; position: relative; }
.signup-wrapper .step-progress::before { content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 4px; background: #403F3F99; z-index: 0; width: 70%; margin: auto; }
.signup-wrapper .step-progress  .step-indicator.active { color: #f8931d;}
.signup-wrapper .step-progress .step-indicator {position: relative; text-align: center; color: #fff; z-index: 1; flex: 1; }
.signup-wrapper .step-progress .step-indicator::before { content: counter(step); counter-increment: step; width: 40px; height: 40px; line-height: 26px; border: 3px solid #403F3F99; display: flex; margin: 0 auto 10px; border-radius: 50%; background: #262424; color: #fff; font-weight: 600; align-items: center; justify-content: center; }forgot-password
.signup-wrapper .step-progress .step-indicator.active::before {border-color: #f8931d; background: #f8931d; color: #fff; }
.signup-wrapper .step-progress .step-indicator.active::before { background: #f8931d; border-color: #f8931d; box-shadow: 0 0 10px rgba(248,147,29,0.4);}
.signup-wrapper .step {display: none; }
.signup-wrapper .step.active {display: block; }
.signup-wrapper h2 {text-align: center; color: #fff; font-size: 28px; margin-bottom: 20px; font-family: "pphattonmedium500"; font-weight: 500; }

.signup-wrapper .form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; }
.signup-wrapper .form-group {display: flex; flex-direction: column; }
.signup-wrapper .form-group.full-width {grid-column: span 2; }
.signup-wrapper .form-group label {margin-bottom: 8px; font-weight: 500; color: #fff; }
.signup-wrapper .form-group input, 
.signup-wrapper .form-group select { padding: 12px; border: 1px solid #403F3F99; border-radius: 8px; font-size: 15px; width: 100%; background: #1b1b1b; color: #fff; }
.signup-wrapper .form-group input:focus,
.signup-wrapper .form-group select:focus {border-color: #f8931d; outline: none; box-shadow: none; }
.signup-wrapper .form-grid .form-group .iti { display: block;}
.signup-wrapper .form-group .iti--allow-dropdown .iti__flag-container .iti__selected-flag {height: auto; padding: 12px 6px; }
.signup-wrapper .form-group .iti--allow-dropdown .iti__flag-container .iti__selected-flag .iti__selected-dial-code {color: #fff;}
.signup-wrapper .buttons {display: flex; justify-content: center; gap: 20px; }
.signup-wrapper .buttons button { margin-top: 30px; padding: 14px 50px !important; background-color: #f8931d; border: none; border-radius: 32px; color: white; font-size: 16px; font-weight: 500; cursor: pointer; line-height: 1; }
.signup-wrapper .buttons button:hover {background-color: #6fa744; }
.signup-wrapper .error {color: red; font-size: 14px; margin-top: 5px; }
.signup-wrapper .form-group input.success {border-color: #28a745; }
.signup-wrapper .form-group input.error {border-color: #dc3545; }
.pricing-plans .top {display: flex; justify-content: center; align-items: center; margin-bottom: 20px; color: #fff; }
.pricing-plans .switch {position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 10px; }
.pricing-plans .switch input {opacity: 0; width: 0; height: 0; }
.pricing-plans .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #6fa744; transition: 0.4s; border-radius: 34px;}
.pricing-plans .slider:before {position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; }
.pricing-plans input[type="checkbox"]:checked + .slider {background-color: #f8931d; }
.pricing-plans input[type="checkbox"]:checked + .slider:before {transform: translateX(26px); }
.package-container {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.packages {background: #000000; color: #fff; padding: 20px; border-radius: 20px; width: 450px; margin: 10px auto 30px; text-align: left; box-shadow: 0 19px 38px rgb(40 40 40), 0 15px 12px rgba(30, 35, 33, 0.2); display: none; }
.packages.active {display: block; }
.packages ul {padding: 15px; list-style: none; margin: 20px 0; }
.packages ul li {padding: 10px 0; border-bottom: 1px solid #444;list-style: disc;}
#step3 button.btn {display: block; margin: 0; width: fit-content; }
.packages h3 {margin-bottom: 15px; text-align: center;}
.signup-wrapper input:-webkit-autofill,
.signup-wrapper input:-webkit-autofill:hover,
.signup-wrapper input:-webkit-autofill:focus,
.signup-wrapper input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 30px white inset !important; }
.signup-wrapper .step #error {color: #f00; font-weight: 400; font-size: 14px; }
#birthday::-webkit-calendar-picker-indicator {filter: invert(1); cursor: pointer;}

.signup-wrapper .form-group input::placeholder { color: #ffffff66; opacity: 1; }

/* Payment Fields */
.payment-wrapper {display: flex; flex-wrap: wrap; }
.payment-wrapper .field-container {width: 48%; }
.payment-wrapper .field-container>div {color: #fff; font-size: 16px; margin: 0 0 5px; line-height: 1.1; } .payment-wrapper .field-container .filed-group {width: 100%; border: 1px solid#ddd; color: #fff; padding: 5px 5px 5px 15px; border-radius: 6px; background: #fff; }
.payment-wrapper .field-container:nth-child(even) {margin-right: 0; margin-left: auto; }


/*start loader */
#loading { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgb(0 0 0 / 81%); margin: 0; z-index: 1;}
#loading img { width: 50px; margin: auto; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
/*End loader  */


/*--Start Date Picker--*/
.flatpickr-calendar .flatpickr-months {background: #f5f7fa; overflow: hidden;border-radius: 6px;}
.flatpickr-calendar .flatpickr-months span {padding: 5px 5px;}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month {padding: 0;font-size: 16px;}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month select {color: #000;}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper {width: 4rem; padding: 2px 4px;}
.flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInputWrapper input.numInput.cur-year {color: #000;}
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays {background: #f5f7fa; border-top: 1px solid#ddd;border-bottom: 1px solid #ddd; padding: 10px 0; height: auto; }
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day.selected {background: #f8931d; border-color: #f8931d; }
/*--End Date Picker--*/

@media (min-width: 768px) and (max-width: 1023px) {

    .signup-wrapper { margin: 60px 20px; padding: 30px; }

}

@media (max-width: 767px) {

    .signup-wrapper { margin: 50px 15px; padding: 24px; max-width: 100%; }
    .signup-wrapper .form-grid { display: grid; grid-template-columns: 1fr; gap: 20px 30px; }

}