:root{--main-color: #7852fd;--secondary-color: #161a40;--text-color: #6b7280;--bg-light-gray-color: #e6e0e9;--bg-light-color: #f9f9f9;--background-error: #ffe6e6;--done-color: #20c560}.page{width:80%;padding:2vh 2vw}.header{width:90%;max-height:200px;padding:1vh 1vw;display:flex;margin:auto}.brand{width:100%;display:flex;justify-content:start;gap:1vw}.brand__icon{padding:1vh 1vw;display:flex}.brand__logo{margin:auto;max-height:60px;max-width:100px;height:auto;width:auto}.brand__info{padding:1vh 1vw}.brand__title{color:var(--main-color);font-size:1rem}.brand__subtitle{color:var(--secondary-color);font-size:.75rem;font-weight:700}.form{display:flex;width:90%;margin:auto}.side-nav{background-color:var(--bg-light-gray-color);width:25%;max-height:fit-content;margin:0 auto;padding:1vh 1vw;display:flex;flex-direction:column;border-radius:16px;box-shadow:0 10px 24px #0e0a2f14;border:1px solid rgba(14,10,47,.06)}.side-nav__header{margin-bottom:1vh}.side-nav__title{font-size:1.25rem;margin-bottom:1vh;color:var(--secondary-color)}.side-nav__description{font-size:.75rem;margin-top:0;color:var(--text-color)}.steps{display:flex;flex-direction:column}.steps__item{display:flex;gap:.75rem;align-items:start;padding:1vh 1vw;margin-bottom:1vh}.steps__badge{min-width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:#fff;font-weight:700}.steps__badge--check{display:none}.steps__title{font-weight:700;font-size:.95rem;margin:0;color:var(--secondary-color)}.steps__desc{font-size:.8rem;margin:.15rem 0 0;color:var(--text-color)}.steps__item--active{background:color-mix(in srgb,var(--main-color) 8%,transparent);border:1px solid color-mix(in srgb,var(--main-color) 50%,transparent);border-radius:12px}.steps__item--active .steps__badge{border:1px solid color-mix(in srgb,var(--main-color) 100%,transparent);background:#fff}.steps__item--done .steps__badge{border:1px solid color-mix(in srgb,var(--done-color) 100%,transparent);background:var(--done-color)}.steps__item--done .steps__badge--number{display:none}.steps__item--done .steps__badge--check{display:inline-grid;color:#fff}.form__main{background-color:var(--bg-light-gray-color);width:65%;margin:0 auto;border-radius:16px;padding:1vh 1vw;box-shadow:0 10px 24px #0e0a2f14;border:1px solid rgba(14,10,47,.06)}.form-steps{position:relative}.form-step{display:none;opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease}.form-step--active{display:block;opacity:1;transform:translateY(0)}.form-step__header{margin-bottom:1vh}.form-step__title{font-size:1.25rem;margin-bottom:1vh;color:var(--secondary-color)}.form-step__subtitle{margin-top:0;font-size:.75rem;color:var(--text-color)}.form-step__body{padding:1vh 0}.form-step__label{color:var(--secondary-color);margin-bottom:1vh;font-size:.95rem}.form-step__input,.form-step__select{color:var(--secondary-color);border-radius:8px;border:1px solid #ccc;min-height:20px;padding:1vh 1vw;margin-bottom:1vh}.form-step__input:focus,.form-step__select:focus{border-color:var(--main-color);outline:none}.form-step__select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');background-repeat:no-repeat;background-position:right 10px center;border:1px solid #ccc;padding:8px 10px;cursor:pointer}.form-step__help{color:var(--text-color);font-size:.75rem}.form-step .form-step__option{display:flex;align-items:center;padding:1vh 1vw;margin-bottom:1vh;gap:.75rem;border-radius:8px;border:1px solid #ccc}.form-step .form-step__option:hover,.form-step .form-step__option:has(input[type=radio]:checked){background:color-mix(in srgb,var(--main-color) 8%,transparent);border:1px solid color-mix(in srgb,var(--main-color) 50%,transparent)}.form-step .form-step__option input[type=radio]{accent-color:var(--main-color)}#step-1 .form-step__body .form-step__group{display:grid;gap:1vh;margin-bottom:1vh}#step-1 .form-step__body .form-step__group--two-cols{grid-template-columns:1fr 1fr;gap:1vw}#step-1 .form-step__body .form-step__group--two-cols div{display:flex;flex-direction:column}#step-1 .form-step__body .form-step__group--one-col{grid-template-columns:1fr}#step-1 .form-step__body .form-step__group--one-col div{display:flex;flex-direction:column}#step-4 .form-step__body{display:grid;grid-template-columns:1fr 1fr;gap:1vw}.form-step__success{margin-bottom:1vh;padding:1vh 1vw}.form-step__success .form-step__success-url{display:flex;justify-content:space-between;align-items:center;border-radius:8px;border:1px solid #ccc;background-color:var(--bg-light-color);padding:1vh 1vw}.form__nav{margin-top:1rem;display:flex;justify-content:space-between;gap:.5rem}.btn{padding:1vh 1vw;min-width:100px;border-radius:8px;border:1px solid #ccc;cursor:pointer}.btn--primary{background-color:var(--main-color);color:#fff}.btn--ghost{background-color:transparent;color:var(--secondary-color)}.btn--copy{padding:.5vh .5vw;min-width:75px;border-radius:4px}.error{border-bottom:2px solid red!important;background-color:var(--background-error)!important}.hidden{display:none!important}@media screen and (max-width: 992px){.page{width:90%}.brand{flex-direction:column;align-items:center}.form{flex-direction:column;gap:2vh}.side-nav{width:100%}.steps{flex-direction:row;justify-content:space-between}.steps__item{flex-direction:column;align-items:center}.form__main{width:100%}.form-step__header{padding:0 2vw}.form-step__body{padding:1vh 2vw}#step-1 .form-step__body .form-step__group--two-cols{grid-template-columns:1fr}#step-4 .form-step__body{grid-template-columns:1fr;gap:1vh}.steps__title,.steps__desc{text-align:center}}@media screen and (max-width: 600px){.steps__title,.steps__desc{font-size:.5rem}}html,body{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;background-color:#f9f9f9;font-family:Poppins,sans-serif;min-height:100vh}
