@tailwind base;
 @tailwind components;
 @tailwind utilities;

 :where([class^="ri-"])::before {
     content: "\f3c2";
 }

 body {
     font-family: 'Inter', sans-serif;
     background: linear-gradient(135deg, rgba(0, 147, 221, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
 }


 .custom-checkbox.checked {
     border-color: #0093DD;
     background-color: #0093DD;
 }

 .custom-checkbox.checked::after {
     content: '';
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 0.3rem;
     height: 0.6rem;
     border-right: 2px solid white;
     border-bottom: 2px solid white;
 }

 .login-container {
  max-width: 360px;
  width: 90%;
}

 .otp-input {
  width: 100%;
  aspect-ratio: 1/1;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.3s;
}

.otp-input:focus {
  outline: none;
  border-color: #0093DD;
  box-shadow: 0 0 0 3px rgba(0,147,221,0.1);
}

.otp-input.filled {
  background-color: rgba(0,147,221,0.05);
}