main > section.auth {
  max-width: 100%;
  display: flex;
  padding: 0;
}

section.auth > div:first-child {
  min-height: calc(100vh - 76px);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

section.auth > div:first-child > div {
  width: 100%;
  max-width: 34rem;
  padding: 48px 80px;
}

section.auth >  div:first-child > div h2 {
  font-size: 30px;
  margin: 24px 0 0;
}

section.auth >  div:first-child > div h3 {
  font-size: 18px;
  margin: 0;
  color: var(--text-color);
}

section.auth >  div:first-child > div p {
  font-size: 14px;
  margin: 4px 0 0;
  color: var(--text-color);
}

section.auth >  div:first-child > div p.trusted-assistant {
  margin: 8px 0 0;
  color: #4D5564;
}

section.auth >  div:first-child form {
  margin-top: 80px;
}

.form-fields-container {
  margin-top: 24px;
}

/* --- Form Input Group --- */
.form-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Corresponds to gap-2 */
  margin-bottom: 16px;
}

.form-input-group label {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: var(--text-color);
}

.form-input-group input {
  padding: 0.75rem 1rem; /* px-4 py-3 */
  border: 1px solid #D9D9E0;
  border-radius: var(--radius);
  color: var(--text-color);
  outline: none;
  box-shadow: 0 0 0 2px transparent; /* Default for no focus */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-input-group input:focus {
  outline: none;
  border-color: var(--text-color);
  box-shadow: 0 0 0 2px var(--text-color);
}

section.auth > div:first-child > div p.input-error {
  font-weight: 500;
  font-size: 14px;
  display: none;
  margin: 0;
  font-weight: 500;
}

button[role="checkbox"] {
  width: 44px;
  height: 44px;
  margin: 0 8px 0 0;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

button[role="checkbox"] > svg {
  display: none;
}

button[role="checkbox"][aria-checked="true"] {
  background-color: var(--primary-color);
}

button[role="checkbox"][aria-checked="true"] > svg {
  display: block;
}

/* --- Options Container (Checkbox and Forgot Password) --- */
.options-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* --- Magic Link Option --- */
.magic-link-option {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
}

.magic-link-option label {
  font-size: 0.875rem; /* text-sm */
  color: var(--muted-foreground);
  cursor: pointer;
}

/* --- Checkbox Styling (Basic) --- */
.magic-link-option input[type="checkbox"] {
  appearance: none;
  width: 1rem; /* h-4 */
  height: 1rem; /* w-4 */
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px); /* sm */
  background-color: var(--background);
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.magic-link-option input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.magic-link-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem; /* h-2 */
  height: 0.5rem; /* w-2 */
  background-color: var(--text-color);
  transform: translate(-50%, -50%) rotate(45deg);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); /* Simple checkmark shape */
}

/* --- Forgot Password Link --- */
.forgot-password {
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
}

/* --- Submit Button --- */
.submit-button-main {
  padding: 0.75rem 1rem; /* px-4 py-3 */
  background-color: var(--primary-color);
  color: var(--text-color);
  border-radius: var(--radius);
  font-weight: 500; /* font-medium */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.submit-button-main:hover {
  background-color: hsl(var(--primary-color) / 0.9); /* Darker shade of primary */
}

.submit-button-main:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-button-main .loader-icon {
  width: 1rem; /* h-4 */
  height: 1rem; /* w-4 */
  animation: spin 1s linear infinite; /* animate-spin */
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--text-color);
}

.divider > span {
  padding: 0 8px;
  color: var(--text-color);
  font-size: 14px;
  white-space: nowrap;
}

.oauth-buttons {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.oauth-buttons button {
  height: 44px;
  width: 100%;
  border-radius: var(--radius);
  background-color: transparent;
  border: 1px solid #D9D9E0;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}

[data-theme="dark"] .oauth-buttons button {
  color: white;
}

.oauth-buttons button:hover {
  background-color: var(--accent-color);
}

.oauth-buttons button svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

section.auth > div:first-child > div p.no-account {
  margin-top: 28px;
  text-align: center;
}

section.auth > div:first-child > div p.no-account a {
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
}

section.auth > div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  min-height: calc(100vh - 76px);
  padding: 2rem;
}

/* gradient overlay */
section.auth > div:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#00bba7 0%, #009966 100%);
}

/* background image */
section.auth > div:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/static/img/healthcare-pattern.svg');
  opacity: 0.1;
}

section.auth > div:nth-child(2) > div {
  z-index: 9;
  color: #fff;
  max-width: 42rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.auth > div:nth-child(2) > div h2 {
  font-size: 48px;
  text-align: center;
  margin: 0;
}

section.auth > div:nth-child(2) > div p {
  font-size: 1.25rem;
  line-height: calc(1.75 / 1.25);
  text-align: center;
  margin: 24px 0 0;
}

.parallax-features {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem; /* mt-12 */
  flex-wrap: wrap;
  row-gap: 36px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48%;
}

.feature-icon-bg {
  background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
  padding: 0.75rem; /* p-3 */
  border-radius: 9999px; /* rounded-full */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white; /* Ensure SVG icons inherit white color */
}

.feature-icon-bg svg {
  width: 1.5rem; /* h-6 */
  height: 1.5rem; /* w-6 */
  stroke: currentColor;
}

.feature-title {
  margin-top: 1rem; /* mt-4 */
  font-weight: 500; /* font-medium */
}

@media (max-width: 32rem) {
  .oauth-buttons {
    flex-direction: column;
  }
}
@media (max-width: 64rem) {
  section.auth > div:nth-child(2) {
    display: none;
  }
}

@media (min-width: 64rem) {
  section.auth > div:first-child {
    max-width: 34rem;
  }
}