@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(to bottom right,#f9fcfc 0%,#ffffff 100%);font-family:'Montserrat',sans-serif;min-height:100vh;position:relative;overflow:hidden}body::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:250px;background:#cde6e6;z-index:0;clip-path:polygon(0 40%,15% 50%,30% 30%,45% 45%,65% 60%,80% 50%,100% 70%,100% 100%,0 100%)}.modal{visibility:hidden;position:fixed;z-index:10;left:0;top:70px;width:100%;height:90%;background-color:rgba(214,228,236,0.5);opacity:0;transform:translateY(-30px);transition:opacity 0.5s ease,transform 0.5s ease,visibility 0s 0.5s;display:flex;justify-content:center;align-items:center}.modal.show{visibility:visible;opacity:1;transform:translateY(0);transition:opacity 0.5s ease,transform 0.5s ease}.modal.hide{visibility:hidden;opacity:0;transform:translateY(-20px);transition:opacity 0.3s ease,transform 0.3s ease,visibility 0s 0.3s}.modal-content{background-color:#ffffff;width:420px;border-radius:12px;box-shadow:0 4px 25px rgba(0,0,0,0.15);position:relative;z-index:20;padding:30px 25px 25px 25px;transform:scale(0.95);animation:popUp 0.5s forwards cubic-bezier(0.23,1,0.32,1)}@keyframes popUp{to{transform:scale(1)}}.card-header{font-size:24px;font-weight:700;text-align:center;color:#456EB0;margin-bottom:20px;position:relative}.card-header::after{content:"";display:block;width:50px;height:4px;background:#456EB0;margin:8px auto 0 auto;border-radius:2px}.card-body{position:relative}.error-message{color:#d10000;font-size:14px;margin-top:5px;text-align:center;font-weight:500}.social-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 15px;margin-top:15px;margin-bottom:15px;border:none;border-radius:6px;font-size:16px;font-weight:500;color:#fff;cursor:pointer;position:relative;transition:transform 0.3s,box-shadow 0.3s}.social-btn i{font-size:18px;margin-right:8px}.social-btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,0.1)}.btn-text{color:white;font-weight:600}.facebook-btn{background-color:#1877F2}.facebook-btn:hover{background-color:#166FE2}.google-btn{background-color:#db4437}.google-btn:hover{background-color:#c23321}.separator{text-align:center;color:#a19f9f;margin:20px 0;position:relative}.separator span{background:#fff;padding:0 10px;position:relative;z-index:1;font-size:14px}.separator::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd;z-index:0}.footer-text{font-size:14px;margin-top:30px;text-align:center}.footer-separator{text-align:center;color:#a19f9f;margin:20px 0;position:relative}.footer-separator::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd;z-index:0}.back-icon{font-size:1.4rem;color:#333;cursor:pointer;position:absolute;top:20px;left:20px;z-index:10}.back-icon:hover{color:#777}.form-group{margin-bottom:20px}.modern-input{width:100%;padding:14px 18px;font-size:16px;font-weight:400;color:#474a4d;background:#ffffff;border:2px solid #e5e4e4;border-radius:20px;outline:none;transition:all 0.3s ease}.modern-input::placeholder{color:#aaa;font-weight:400}.modern-input:focus{background-color:#fff;border-color:#456EB0;box-shadow:0 0 5px rgba(69,110,176,0.2)}.modern-input:focus{border-color:transparent;box-shadow:0 0 5px rgba(69,110,176,0.3)}.disabled-button{cursor:not-allowed;pointer-events:none;transform:none!important}.register-btn.disabled-button:hover{background-color:rgba(74,169,165,1)!important;transform:none!important;cursor:not-allowed}.submit-btn{display:inline-block;width:100%;padding:14px 0;font-size:16px;font-weight:600;background-color:#456EB0;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s}.submit-btn:hover{background-color:#3B61A1;transform:translateY(-2px);box-shadow:0 6px 14px rgba(59,97,161,0.2)}.forgot-password{text-align:center;margin-top:10px}.forgot-password a{font-size:14px;color:#456EB0;text-decoration:none;font-weight:500}.forgot-password a:hover{color:#2f5494}@media (max-width:480px){.modal-content{width:90%;padding:20px}.card-header{font-size:20px}.facebook-btn,.google-btn{font-size:14px}}.spinner{display:inline-block;width:16px;height:16px;margin-right:8px;border:2px solid #fff;border-top:2px solid #999;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}