@layer components {
  .portal-order-lookup {
  }

  .portal-order-lookup .portal-header {
    margin-bottom: var(--spacing-sm);
  }

  .portal-order-lookup__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .portal-order-lookup__form label {
    font-size: var(--text-x-small)
  }

  .portal-order-lookup__form .form-group {
    margin-bottom: 0;
  }

  .portal-order-lookup__form .form-group label {
    color: var(--portal-muted-foreground);
    margin-bottom: var(--spacing-sm);
    font-weight: 400;
  }

  .portal-order-lookup__form .form-group input[type="text"],
  .portal-order-lookup__form .form-group input[type="email"] {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background-color: white;
  }

  .portal-order-lookup__form .form-group input::placeholder {
    color: rgb(115 115 115 / 50%);
  }

  .portal-order-lookup__form .form-group input:focus {
    outline: none;
    border-color: var(--color-black);
    box-shadow: none;
  }

  .btn-portal-primary {
    background-color: var(--color-black);
    color: white;
    border-color: var(--color-black);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    font-size: var(--text-normal);
    font-weight: 500;
  }

  .btn-portal-primary:hover {
    background-color: var(--color-gray-800);
    color: white;
  }

  .portal-order-lookup__track-link {
    display: inline-block;
    margin-top: var(--spacing-md);
    font-size: var(--text-small);
    color: var(--color-text);
    text-decoration: none;
  }

  .portal-order-lookup__track-link:hover {
    text-decoration: underline;
  }