:root {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
  --color-red-50: oklch(0.971 0.013 17.38);
  --color-red-400: oklch(0.704 0.191 22.216);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-700: oklch(0.505 0.213 27.518);
  --color-orange-50: #fff6ed;
  --color-orange-400: #fd853a;
  --color-orange-500: #fb6514;
  --color-green-50: oklch(0.982 0.018 155.826);
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-400: oklch(0.792 0.209 151.711);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-green-600: oklch(0.627 0.194 149.214);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-teal-100: oklch(0.953 0.051 180.801);
  --color-teal-400: oklch(0.777 0.152 181.912);
  --color-teal-700: oklch(0.511 0.096 186.391);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-purple-100: oklch(0.946 0.033 307.174);
  --color-purple-400: oklch(0.714 0.203 305.504);
  --color-purple-700: oklch(0.496 0.265 301.924);
  --color-gray-50: #f9fafb;
  --color-gray-100: #f2f4f7;
  --color-gray-200: #e4e7ec;
  --color-gray-300: #d0d5dd;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1d2939;
  --color-gray-900: #101828;
  --color-gray-950: #0c111d;
  --color-black: #101828;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-xs: 20rem;
  --container-md: 28rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-wider: 0.05em;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --aspect-video: 16/9;
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: var(--font-sans);
  --default-font-feature-settings: var(--font-sans--font-feature-settings);
  --default-font-variation-settings: var(--font-sans--font-variation-settings);
  --default-mono-font-family: var(--font-mono);
  --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
  --default-mono-font-variation-settings: var(
    --font-mono--font-variation-settings
  );
  --font-outfit: 'Montserrat', 'Inter', 'Roboto', 'Noto Sans Vietnamese',
    'Segoe UI', system-ui, -apple-system, sans-serif;
  --breakpoint-2xl: 1536px;
  --text-title-2xl: 72px;
  --text-title-2xl--line-height: 90px;
  --text-title-xl: 60px;
  --text-title-xl--line-height: 72px;
  --text-title-lg: 48px;
  --text-title-lg--line-height: 60px;
  --text-title-md: 36px;
  --text-title-md--line-height: 44px;
  --text-title-sm: 30px;
  --text-title-sm--line-height: 38px;
  --text-theme-xl: 20px;
  --text-theme-xl--line-height: 30px;
  --text-theme-sm: 14px;
  --text-theme-sm--line-height: 20px;
  --text-theme-xs: 12px;
  --text-theme-xs--line-height: 18px;
  --color-brand-50: #ecf3ff;
  --color-brand-100: #dde9ff;
  --color-brand-200: #c2d6ff;
  --color-brand-300: #9cb9ff;
  --color-brand-400: #7592ff;
  --color-brand-500: #465fff;
  --color-brand-600: #3641f5;
  --color-brand-800: #252dae;
  --color-brand-950: #161950;
  --color-blue-light-50: #f0f9ff;
  --color-blue-light-500: #0ba5ec;
  --color-blue-light-600: #0086c9;
  --color-gray-dark: #1a2231;
  --color-success-50: #ecfdf3;
  --color-success-100: #d1fadf;
  --color-success-300: #6ce9a6;
  --color-success-500: #12b76a;
  --color-success-600: #039855;
  --color-success-700: #027a48;
  --color-success-800: #05603a;
  --color-error-50: #fef3f2;
  --color-error-300: #fda29b;
  --color-error-400: #f97066;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;
  --color-error-700: #b42318;
  --color-error-800: #912018;
  --color-warning-50: #fffaeb;
  --color-warning-400: #fdb022;
  --color-warning-500: #f79009;
  --color-warning-600: #dc6803;
  --color-warning-700: #b54708;
  --color-theme-pink-500: #ee46bc;
  --color-theme-purple-500: #7a5af8;
  --drop-shadow-4xl: 0 35px 35px #00000040, 0 45px 65px #00000026;
  --z-index-1: 1;
  --z-index-999: 999;
  --z-index-9999: 9999;
  --z-index-99999: 99999;
  --z-index-999999: 999999;
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
}

/* Utility Classes from Login Page */
.h-screen {
  height: 100vh;
}

.w-screen {
  width: 100vw;
}

.w-full {
  width: 100%;
}

.max-w-xs {
  max-width: 20rem;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.right-0 {
  right: 0;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.-z-1 {
  z-index: -1;
}

.z-1 {
  z-index: 1;
}

.text-center {
  text-align: center;
}

.text-gray-400 {
  color: var(--color-gray-400);
}

.mb-4 {
  margin-bottom: 1rem;
}

@media (prefers-color-scheme: dark) {
  .dark\:text-white\/60 {
    color: rgba(255, 255, 255, 0.6);
  }
}

/* Responsive max-width classes */
.max-w-\[250px\] {
  max-width: 250px;
}

@media (min-width: 1280px) {
  .xl\:max-w-\[450px\] {
    max-width: 450px;
  }
}

.auth-right-section {
  line-height: inherit;
  font-family: var(--font-outfit);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  border-color: var(--color-gray-200, currentColor);
  position: relative;
  height: 100%;
  align-items: center;
  background-color: var(--color-brand-950);
  display: grid;
  width: 50%;
}

.grid-pattern {
  line-height: inherit;
  font-family: var(--font-outfit);
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  border-color: var(--color-gray-200, currentColor);
  position: absolute;
  top: calc(var(--spacing) * 0);
  right: calc(var(--spacing) * 0);
  z-index: calc(var(--z-index-1) * -1);
  width: 100%;
  max-width: 450px;
}

/* Hide auth-right-section on screens smaller than 1024px */
@media (max-width: 1023px) {
  .auth-right-section {
    display: none;
  }
}

/* ===== SHARED AUTH LAYOUT STYLES ===== */
/* These styles are shared across all authentication pages */

/* Main container for all auth pages */
.auth-container {
  position: relative;
  background-color: white;
  z-index: 1;
}

.dark .auth-container {
  background-color: var(--color-gray-900);
}

/* Two-column flex layout */
.auth-flex-layout {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .auth-flex-layout {
    flex-direction: row;
  }
}

/* Left side form container */
.auth-form-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

@media (min-width: 1024px) {
  .auth-form-container {
    width: 50%;
  }
}

/* Form wrapper with centering */
.auth-form-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

/* ===== SHARED FORM STYLES ===== */
/* Form styles shared across all authentication pages */

.font-outfit {
  font-family: var(--font-outfit);
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-gray-500);
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.back-link:hover {
  color: var(--color-gray-700);
}

/* Social login buttons */
.social-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .social-buttons {
    gap: 1.25rem;
  }
}

.social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--color-gray-800);
  background-color: var(--color-gray-100);
  border-radius: 0.5rem;
  transition-property: background-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.social-button:hover {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
}

/* Form divider */
.form-divider {
  position: relative;
  padding: 0.75rem 0;
  margin: 0.75rem 0;
}

.divider-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.divider-line::before {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-gray-200);
}

.divider-text {
  position: relative;
  display: flex;
  justify-content: center;
  font-size: 0.875rem;
}

.divider-text span {
  padding: 0.5rem;
  color: var(--color-gray-400);
  background-color: inherit;
}
/* Form elements */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

/* Required field asterisk styling */
.required-asterisk {
  color: var(--color-red-500, #ef4444);
  margin-left: 0.125rem;
  font-weight: 600;
}

.form-input {
  height: 2.75rem;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--color-gray-800);
  background-color: transparent;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-brand-300);
  box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.1);
}

/* Password input styles */
.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) scale(0.75);
  z-index: 30;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle:hover {
  color: var(--color-gray-500);
}

.password-toggle:focus {
  outline: 2px solid var(--color-brand-200);
  outline-offset: 2px;
}

/* Default state: password is hidden, show eye icon to reveal it */
.show-when-visible {
  display: none;
}

.show-when-hidden {
  display: block;
}

/* When password is visible, hide eye icon and show eye-off icon */
.password-visible .show-when-hidden {
  display: none;
}

.password-visible .show-when-visible {
  display: block;
}

/* Legacy rules for backward compatibility */
.password-toggle-hide.hidden,
.password-toggle-show.hidden {
  display: none;
}

/* Checkbox styles */
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--color-gray-700);
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
}

/* Hide the default checkbox completely */
.checkbox-label input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Remove any focus rings from the hidden input */
.checkbox-label input[type='checkbox']:focus {
  outline: none;
  box-shadow: none;
}

.checkbox-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Checked state */
.checkbox-label input[type='checkbox']:checked ~ .checkbox-custom {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-500);
}

/* Hover state */
.checkbox-label:hover .checkbox-custom {
  border-color: var(--color-brand-400);
}

/* Focus state - only show when keyboard focused */
.checkbox-label input[type='checkbox']:focus-visible ~ .checkbox-custom {
  box-shadow: 0 0 0 2px var(--color-brand-200);
}

.checkbox-mark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
  pointer-events: none;
}

/* Show checkmark when checked */
.checkbox-label
  input[type='checkbox']:checked
  ~ .checkbox-custom
  .checkbox-mark {
  opacity: 1;
  transform: scale(1);
}

.checkbox-mark svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Submit button */
.submit-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  background-color: var(--color-brand-500);
  border-radius: 0.5rem;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.submit-button:hover {
  background-color: var(--color-brand-600);
}

/* Button base styles (scoped to auth pages) */
.auth-container button:not(.submit-button):not(.social-button) {
  border: none;
  border-width: 0;
  border-style: none;
  outline: none;
  font-family: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Remove all possible borders and outlines except for keyboard focus */
button:not(:focus-visible),
/* Remove all possible borders and outlines except for keyboard focus */
.auth-container button:not(:focus-visible),
.auth-container .social-button:not(:focus-visible),
.auth-container .submit-button:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Keep focus outline only for keyboard navigation */
.auth-container button:focus-visible {
  outline: 2px solid var(--color-brand-400);
  outline-offset: 2px;
  border: none !important;
} /* Keep focus outline only for keyboard navigation */
button:focus-visible {
  outline: 2px solid var(--color-brand-400);
  outline-offset: 2px;
  border: none !important;
}

/* If social buttons are anchors, ensure they have no text-decoration */
.social-button,
.social-button:link,
.social-button:visited,
.social-button:hover,
.social-button:active,
.social-button:focus {
  text-decoration: none !important;
}

/* Preserve keyboard focus visible outline for anchor social buttons */
.social-button:focus-visible {
  outline: 2px solid var(--color-brand-400);
  outline-offset: 2px;
}

/* Form validation and error styles */
.form-error-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-error-600);
  font-weight: 400;
}

.form-error-text:empty {
  display: none;
}

/* Client-side validation error text */
.client-error-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-error-600);
  font-weight: 400;
}

/* Server-side validation error text (to distinguish from client errors) */
.server-error-text {
  margin-top: 0.5rem; /* Add extra margin when both client and server errors might be present */
}

.form-input:invalid,
.form-input.input-validation-error,
.form-input.has-error {
  border-color: var(--color-error-500);
  box-shadow: 0 0 0 1px var(--color-error-500);
}

.form-input.has-success {
  border-color: #10b981;
  box-shadow: 0 0 0 1px #10b981;
}

.form-input:invalid:focus,
.form-input.input-validation-error:focus,
.form-input.has-error:focus {
  border-color: var(--color-error-500);
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1);
}

.form-input.has-success:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* API Error Message Styles */
.error-container {
  margin-bottom: 1rem;
}

.api-error-message {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  color: var(--color-error-500);
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

.error-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-error-500);
}

.api-error-message:last-child {
  margin-bottom: 0;
}

/* Additional utility classes */
.required {
  color: var(--color-error-500);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Brand color utilities */
.border-brand-500 {
  border-color: var(--color-brand-500);
}

.bg-brand-500 {
  background-color: var(--color-brand-500);
}

/* Spacing utilities */
.mr-3 {
  margin-right: 0.75rem;
}

.h-5 {
  height: 1.25rem;
}

.w-5 {
  width: 1.25rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.fill-current {
  fill: currentColor;
}

.language-toggle-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  color: var(--color-gray-700, #344054);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.25rem;
  font-weight: 500;
}