@layer components {
  .login-btn {
    @apply inline-block bg-white border border-primary text-primary font-medium rounded-full px-4 py-2 text-sm hover:bg-primary hover:text-white transition;
  }

  .login-btn-dr {
    @apply inline-block bg-white border border-[#034971] text-[#034971] font-medium rounded-full px-4 py-2 text-sm hover:bg-[#034971] hover:text-white transition;
  }

  .login-form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }

  .login-form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 appearance-none bg-no-repeat bg-right pr-10;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-size: 1.5em 1.5em;
    background-position: right 0.75rem center;
  }

  .login-form-label {
    @apply block text-base font-medium text-gray-900 mb-2;
  }

  .login-form-submit {
    @apply w-full py-3 px-8 border-0 rounded-full text-base text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer;
  }

  .login-form-pin-input {
    @apply w-full h-12 text-center text-2xl border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
  }

  .login-form-pin-container {
    @apply flex gap-2 justify-start w-full;
  }

  .login-form-pin-code-submit {
    @apply py-3 px-8 border-0 rounded-full text-base text-white bg-primary hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer;
  }

  .login-form-pin-code-submit:disabled {
    @apply opacity-50 cursor-not-allowed bg-gray-400 hover:bg-gray-400;
  }

  .login-form-container {
    @apply w-full max-w-md mx-auto px-8;
  }

  .login-form-section {
    @apply text-left;
  }

  .login-welcome-text {
    @apply text-3xl font-semibold text-gray-900 text-center;
  }

  .login-radio-button {
    /* Additional login-specific radio button styling can go here if needed */
  }

  .login-radio-label {
    @apply ml-2 block text-sm font-medium text-gray-700;
  }

  .login-start-over-text {
    @apply text-blue-600 hover:text-blue-700 underline content-center;
  }

  .login-alert {
    @apply bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg;
  }

  .login-cancel-btn {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-full px-4 py-2 text-sm transition cursor-pointer;
  }

  .modal-close {
    @apply text-primary hover:text-primary-hover text-3xl font-bold px-2 cursor-pointer;
  }
}