@font-face {
   font-family: "Figtree";
   src: url("./assets/fonts/figtree.ttf") format("truetype");
   font-weight: 300 900;
   font-style: normal;
   font-display: swap;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   /* outline: 1px solid red; */
}

body {
   font-family: "Figtree", sans-serif;
   background: #f4f6fb;
   height: 90dvh;
}

.container {
   width: 100%;
   background: #fff;
   display: grid;
   grid-template-columns: 1.1fr 0.9fr;
   padding: 32px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.visual {
   background: linear-gradient(to bottom, rgba(70, 95, 241, 0.37) 0%, #465ff1 100%),
               url("./assets/wave.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   width: 90%;
   color: #fff;
   padding: 108px 70px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
   border-radius: 20px;
}

.visual h1 {
   font-size: 40px;
   font-weight: bold;
   margin-bottom: 12px;
}

.visual p {
   font-size: 22px;
   opacity: 0.8;
}

.visual .bottom h2 {
   font-size: 40px;
   font-weight: bold;
}

.visual .bottom p {
   font-size: 24px;
   margin: 0 10px;
}

.form-container {
   padding: 0 90px;
}

.form-area {
   padding: 100px 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.brand {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: bold;
   margin-bottom: 32px;
}

.tabs {
   display: flex;
   background: #eef2ff;
   border-radius: 10px;
   padding: 4px;
   margin-bottom: 28px;
}

.tab {
   flex: 1;
   text-align: center;
   padding: 10px 0;
   font-size: 14px;
   border-radius: 8px;
   cursor: pointer;
   color: #64748b;
}

.tab.active {
   background: #4f46e5;
   color: #fff;
   font-weight: 500;
}

label {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 6px;
   display: block;
}

input {
   width: 100%;
   padding: 12px 14px;
   border-radius: 10px;
   border: 1px solid #c7d2fe;
   margin-bottom: 18px;
   font-size: 14px;
}

input.valid {
   border: 2px solid #2ecc71;
}

input.invalid {
   border: 2px solid #e74c3c;
}

.input-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.password-hint {
   font-size: 12px;
   color: #64748b;
   margin-bottom: 20px;
}

.password-hint li {
   list-style: none;
   margin-bottom: 4px;
   font-size: 13px;
   color: #999;
   transition: color 0.3s ease;
}

li::before {
   content: "✓";
   margin-right: 4px;
}

.rule-valid {
   color: #2ecc71 !important;
}

.rule-invalid {
   color: #e74c3c !important;
}

.rule-valid::before {
   content: "✔ ";
}

.rule-invalid::before {
   content: "✖ ";
}

.error-message {
   color: #e74c3c;
   font-size: 12px;
   margin-bottom: 8px;
}

button {
   margin-top: 20px;
   background: #818cf8;
   border: none;
   padding: 10px 20px;
   border-radius: 8px;
   font-size: 16px;
   font-weight: bold;
   color: #fff;
   cursor: pointer;
   width: 100%;
}

button:disabled {
   background: #ccc;
   cursor: not-allowed;
}

button.enabled {
   background: #2ecc71;
   cursor: pointer;
}

.terms {
   margin-top: 18px;
   font-size: 11px;
   text-align: center;
   color: #94a3b8;
}

.terms span {
   color: black;
}
.success-message {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   background-color: #2ecc71;
   color: white;
   padding: 12px 24px;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   font-size: 16px;
   z-index: 1000;
}

@media (max-width: 900px) {
   .container {
      grid-template-columns: 1fr;
      height: auto;
   }

   .form-container{
      padding: 0;
   }
   .visual {
      display: none;
   }
}