@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}body:has(.hero-section){overflow:hidden;margin:0;padding:0}.hero-section{height:100vh;width:100vw;background-image:url(/assets/Login%20page_BG_3-CWonCvob.webp);background-blend-mode:overlay;background-size:cover;background-position:center;background-repeat:no-repeat}.hero-bg-shade{background-color:#155b63ed;position:fixed;inset:0;pointer-events:none}.top-nav{position:absolute;top:2rem;right:2rem;display:flex;gap:1rem;z-index:10}.nav-btn{color:#fff;background:transparent;border:2px solid rgba(255,255,255,.3);border-radius:50px;padding:.6rem 1.5rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .3s ease;font-size:.9rem}.nav-btn:hover,.nav-btn.register{background-color:#ffffff1a;border-color:#ffffff80}.nav-btn.register:hover{background-color:#fff3;border-color:#fff}.hero-container{position:relative;z-index:1;width:100%;height:100%;overflow:auto}.center-content{width:100%}.branding{display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-bottom:3rem;animation:fadeInUp 1s ease-out forwards}.branding i{color:#fff}.brand-text{text-align:left}.brand-title{font-size:3rem;font-weight:800;line-height:1;letter-spacing:-.05em;color:#fff;margin:0}.brand-subtitle{color:#ffffff80;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;margin:0}.intro-text{margin-bottom:4rem;animation:fadeInUp 1s ease-out forwards;animation-delay:.3s;opacity:0}.intro-title{font-size:2rem;font-weight:300;margin-bottom:1.5rem;color:#fff}.intro-description{color:#ffffff80;max-width:800px;margin:0 auto;line-height:1.6;font-size:1.25rem}.cta-section{display:flex;justify-content:center;gap:1.5rem;animation:fadeInUp 1s ease-out forwards;animation-delay:.6s;opacity:0}.cta-button{background-color:transparent;color:#fff;border:2px solid #ff5e1a;border-radius:50px;padding:1rem 2.5rem;font-weight:600;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;gap:.5rem}.cta-button.primary{background-color:#ff5e1a;border:none}.cta-button.primary:hover{background-color:#e54e0f;transform:translateY(-2px);box-shadow:0 10px 20px #ff5e1a4d}.cta-button.secondary:hover{background-color:#ff5e1a1a;transform:translateY(-2px)}.login-container{background:#ffffff1a;backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.2);border-radius:1.5rem;padding:3rem;color:#fff;box-shadow:0 20px 60px #00000080;max-width:450px;width:100%;margin:auto;position:relative;animation:fadeInUp .5s ease-out forwards}.close-button{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.5rem;transition:transform .2s ease}.close-button:hover{transform:scale(1.1)}.login-header{text-align:center;margin-bottom:2rem}.login-header i{color:#fff;margin-bottom:1rem}.login-title{font-size:1.5rem;font-weight:800;letter-spacing:-.05em;margin:0;color:#fff!important}.login-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{width:100%}.form-input{width:100%;padding:1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:.5rem;color:#fff;font-size:1rem;transition:border-color .3s ease;box-sizing:border-box}.form-input::placeholder{color:#ffffff80}.form-input:focus{outline:none;border-color:#ff5e1a}.form-checkbox{display:flex;align-items:center;gap:.5rem}.form-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-checkbox label{color:#ffffffb3;cursor:pointer}.submit-button{width:100%;padding:1rem;background-color:#ff5e1a;color:#fff;border:none;border-radius:.5rem;font-weight:600;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.submit-button:hover{background-color:#e54e0f}.forgot-link{text-align:center;color:#ffffffb3;font-size:.875rem;text-decoration:none;transition:color .3s ease}.forgot-link:hover{color:#ff5e1a}.auth-links{display:flex;flex-direction:column;gap:.75rem;align-items:center}.auth-link{color:#ffffffb3;font-size:.875rem;text-decoration:none;transition:color .3s ease}.auth-link:hover{color:#ff5e1a}.form-description{color:#ffffffb3;font-size:.9rem;text-align:center;margin:0 0 1rem;line-height:1.5}.error-message{color:#f44;margin-top:10px;font-size:.9rem;text-align:center}.success-message{color:#4ade80;margin-top:10px;font-size:.9rem;text-align:center}.otp-container{display:flex;gap:.75rem;justify-content:center;margin:1.5rem 0}.otp-input{width:50px;height:50px;text-align:center;font-size:1.5rem;font-weight:600;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:.5rem;color:#fff;transition:all .3s ease}.otp-input:focus{outline:none;border-color:#ff5e1a;background:#ffffff26;transform:scale(1.05)}.countdown-text{color:#ffffff80;font-size:.875rem}.password-strength{margin-top:-.5rem}.strength-bar{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-bottom:.5rem}.strength-fill{height:100%;transition:all .3s ease;border-radius:2px}.strength-fill.weak{width:33%;background-color:#f44}.strength-fill.medium{width:66%;background-color:#facc15}.strength-fill.strong{width:100%;background-color:#4ade80}.strength-text{font-size:.75rem;color:#ffffffb3}.footer{position:absolute;bottom:0;left:0;width:100%;padding:1.5rem;text-align:center;color:#ffffff80;font-size:.875rem}@media(max-width:768px){.brand-title{font-size:2rem}.intro-title{font-size:1.5rem}.intro-description{font-size:1rem}.login-container{padding:2rem}}@media(max-width:480px){.otp-input{width:40px;height:40px;font-size:1.25rem}.otp-container{gap:.5rem}}.vehicle-selection-container{animation:fadeInUp .8s ease-out;width:100%;max-width:1000px;margin:0 auto}.vehicle-selection-grid{display:flex;justify-content:center;gap:3rem;margin:3rem 0;flex-wrap:wrap}.vehicle-card{background:#ffffff1a;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:2rem;width:250px;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.vehicle-card:hover{transform:translateY(-10px) scale(1.05);background:#ffffff26;border-color:#ff5e1a;box-shadow:0 20px 40px #0006}.vehicle-icon-wrapper{width:120px;height:120px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;transition:transform .4s ease}.vehicle-icon{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,255,255,.2))}.vehicle-card:hover .vehicle-icon-wrapper{transform:scale(1.1)}.vehicle-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0;letter-spacing:1px;text-transform:uppercase;z-index:1}.vehicle-glow{position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,94,26,.4) 0%,transparent 70%);transform:translate(-50%,-50%);transition:width .4s ease,height .4s ease;border-radius:50%;z-index:0}.vehicle-card:hover .vehicle-glow{width:300px;height:300px}.mb-5{margin-bottom:3rem!important}.mt-5{margin-top:3rem!important}@media(max-width:768px){.vehicle-selection-grid{gap:1.5rem}.vehicle-card{width:180px;height:180px;padding:1.5rem}.vehicle-icon-wrapper{width:80px;height:80px;margin-bottom:1rem}.vehicle-title{font-size:1.2rem}}.login-right-propel-logo{position:absolute;top:0;right:0}
