/**
 * User Login Page Styles
 * Split layout with hero image on left and form on right
 * Uses Katacart design tokens
 */

/* Main wrapper - full viewport height */
.login-page-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background-color: var(--background-surface);
}

.login-page-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background-color: var(--background-white);
}

/* Left side - Hero image section */
.login-hero-section {
  flex: 1;
  background: var(--background-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-40);
  position: relative;
}

.login-hero-image {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-hero-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Right side - Login form section */
.login-form-section {
  flex: 0 0 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-72) var(--spacing-40);
  background-color: var(--background-white);
}

.login-form-container {
  width: 100%;
  max-width: 400px;
}

/* Logo */
.login-logo {
  text-align: left;
  margin-bottom: var(--spacing-48);
}

.login-logo img {
  width: 180px;
  height: auto;
  max-width: 100%;
}

/* Heading */
.login-heading {
  font-size: var(--font-size-40);
  line-height: var(--font-line-height-40);
  font-weight: var(--font-weight-semibold-40);
  color: var(--content-on-white);
  margin-bottom: var(--spacing-32);
  text-align: left;
}

/* Form wrapper */
.login-form-wrapper {
  width: 100%;
}

/* Form styles */
.login-form-wrapper .form-item {
  margin-bottom: var(--spacing-20);
}

.login-form-wrapper label {
  display: block;
  font-size: var(--font-size-14);
  line-height: var(--font-line-height-14);
  font-weight: var(--font-weight-medium-14);
  color: var(--content-on-white);
  margin-bottom: var(--spacing-8);
}

.login-form-wrapper input[type="text"],
.login-form-wrapper input[type="password"],
.login-form-wrapper input[type="email"] {
  width: 100%;
  height: var(--field-height-large);
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--font-size-16);
  line-height: var(--font-line-height-16);
  border: 1px solid var(--stroke-default);
  border-radius: var(--corner-radius-4);
  background-color: var(--background-white);
  color: var(--content-on-white);
  transition: var(--transition-base);
  font-family: var(--font-family-primary);
}

.login-form-wrapper input[type="text"]:hover,
.login-form-wrapper input[type="password"]:hover,
.login-form-wrapper input[type="email"]:hover {
  border-color: var(--state-hover-stroke);
}

.login-form-wrapper input[type="text"]:focus,
.login-form-wrapper input[type="password"]:focus,
.login-form-wrapper input[type="email"]:focus {
  outline: none;
  border-color: var(--state-focus-stroke);
  box-shadow: 0 0 0 3px var(--state-focus-on-light);
}

/* Submit button */
.login-form-wrapper button[type="submit"],
.login-form-wrapper input[type="submit"],
.login-form-wrapper .form-submit {
  width: 100%;
  height: var(--button-height-large);
  padding: 0 var(--spacing-24);
  font-size: var(--font-size-16);
  line-height: var(--font-line-height-16);
  font-weight: var(--font-weight-semibold-16);
  color: var(--content-on-accent);
  background-color: var(--background-accent);
  border: none;
  border-radius: var(--corner-radius-4);
  cursor: pointer;
  transition: var(--transition-base);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--spacing-24);
  font-family: var(--font-family-primary);
}

.login-form-wrapper button[type="submit"]:hover,
.login-form-wrapper input[type="submit"]:hover,
.login-form-wrapper .form-submit:hover {
  background-color: var(--color-coral-60);
}

.login-form-wrapper button[type="submit"]:active,
.login-form-wrapper input[type="submit"]:active,
.login-form-wrapper .form-submit:active {
  background-color: var(--color-coral-100);
}

/* Forgot password link */
.login-form-wrapper .form-item-forgot-password,
.login-form-wrapper a[href*="password"] {
  display: block;
  text-align: center;
  margin-top: var(--spacing-20);
  font-size: var(--font-size-14);
  line-height: var(--font-line-height-14);
  color: var(--content-on-white-secondary);
  text-decoration: underline;
  transition: var(--transition-fast);
}

.login-form-wrapper a[href*="password"]:hover {
  color: var(--content-on-white);
}

/* Hide reCAPTCHA */
.login-form-wrapper .captcha,
.login-form-wrapper .g-recaptcha,
.login-form-wrapper [class*="recaptcha"],
.login-form-wrapper [id*="recaptcha"] {
  display: none !important;
}

/* Messages */
.login-form-wrapper .messages {
  margin-bottom: var(--spacing-20);
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--corner-radius-4);
}

.login-form-wrapper .messages--status {
  background-color: var(--success-5);
  border: 1px solid var(--success-90);
  color: var(--success-90);
}

.login-form-wrapper .messages--error {
  background-color: var(--error-5);
  border: 1px solid var(--error-90);
  color: var(--error-90);
}

.login-form-wrapper .messages--warning {
  background-color: var(--warning-5);
  border: 1px solid var(--warning-90);
  color: var(--warning-90);
}

/* Responsive design */
@media (max-width: 1024px) {
  .login-form-section {
    flex: 0 0 500px;
  }
}

@media (max-width: 768px) {
  .login-page-container {
    flex-direction: column;
  }

  .login-hero-section {
    flex: 0 0 300px;
    padding: var(--spacing-20);
  }

  .login-hero-image {
    max-width: 400px;
  }

  .login-form-section {
    flex: 1;
    padding: var(--spacing-40) var(--spacing-20);
  }

  .login-form-container {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .login-hero-section {
    flex: 0 0 200px;
  }

  .login-form-section {
    padding: var(--spacing-32) var(--spacing-20);
  }

  .login-heading {
    font-size: var(--font-size-20);
    line-height: var(--font-line-height-20);
  }

  .login-logo img {
    width: 100px;
  }
}

/* Hide default page elements on login page */
body.path-user.page-node-type-user-login .layout-container > header,
body.path-user.page-node-type-user-login .layout-container > footer,
body.path-user .layout-container > header,
body.path-user .layout-container > footer {
  display: none;
}

/* Ensure full width for login page */
body.path-user .layout-container {
  max-width: 100%;
  padding: 0;
  margin: 0;
}