/* /web/themes/custom/foursquare_dxpr/css/login.css */

/*
  Custom Login Page Stylesheet for Foursquare DXPR Sub-theme.
  This file provides the specific styling for the /user/login page,
  aiming to match the provided mockup while leveraging DXPR theme variables
  for consistency with the overall site design.
*/

/*
  1. DXPR Theme Variable Integration & Custom Fallbacks
  Utilize DXPR's color scheme, typography, and layout variables where possible.
  Define custom variables for elements unique to the login page or where
  DXPR variables might not exist or provide the desired effect.
*/
:root {
  /* Mockup Color Variables (from flow-4-home.html) */
  --primary-color: #3498db;
  --primary-light: #c7e0ff;
  --primary-dark: #2980b9;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-muted: #95a5a6;
  --background: #f8f9fa;
  
  /* Social Button Colors (Mockup Specific) */
  --fs-google-color: #DB4437;
  --fs-facebook-color: #4267B2;
  --fs-apple-color: #000000;

  /* General Fallbacks (if DXPR variables are not sufficient/available) */
  --fs-white-fallback: #ffffff;
  --fs-light-gray-fallback: #f0f2f5; /* For page background, matching mockup */
  --fs-form-bg: #ffffff; /* Set to white for form background */
  --fs-form-border-radius: 20px; /* More rounded corners for the form */
  --fs-input-bg: #f5f5f5; /* Very light grey for input background */
  --fs-input-border: #e0e0e0; /* Slightly darker light grey for input border */
  --fs-medium-gray-fallback: #ced4da; /* For borders */
  --fs-dark-gray-fallback: #495057;   /* For text */
  --fs-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.05);
  --fs-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
  --fs-border-radius-standard: 6px;
  --fs-border-radius-large: 12px;
}

/*
  2. Body & Page Container Styling
  Styles for the overall login page appearance, ensuring it's centered
  and uses the base theme's typography and background settings.
*/
body.path-user-login {
  font-family: 'Inter', sans-serif; /* Match mockup font */
  /* This is the key: Set DXPR's variable to our desired background color. */
  --dxt-setting-boxed-layout-boxbg: var(--fs-light-gray-fallback);
  color: var(--dxt-color-text, var(--fs-dark-gray-fallback));
  line-height: var(--dxt-setting-body-line-height, 1.6);
  margin: 0;
}

/*
  This container's job is to center the form vertically and horizontally
  within the viewport.
*/
.fs-login-page-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensure it takes up the full viewport height */
  background: transparent; /* Prevent background color mismatch with theme */
}

/*
  3. Login Form Block Styling
  The main container for the login form elements.
  Class 'fs-login-form' is added via hook_form_alter in foursquare_dxpr.theme.
*/
form.fs-login-form {
  background-color: var(--fs-form-bg); /* Use new explicit form background */
  padding: 30px 40px;
  border-radius: var(--fs-form-border-radius);
  box-shadow: var(--dxt-setting-block-shadow, var(--fs-shadow-medium));
  border: var(--dxt-setting-block-border-width, 1px) solid var(--dxt-setting-block-border-color, var(--dxt-color-graylighter, var(--fs-medium-gray-fallback)));
  width: 100%;
  max-width: 450px; /* Mockup constraint */
}

/*
  4. Login Form Header (Logo, Title, Subtitle)
  Elements are added via hook_form_alter.
*/
.fs-login-header {
  background-color: var(--dxt-color-secondary, #c7e0ff); /* Use DXPR secondary color with primary-light fallback */
  text-align: center;
  padding: 25px 15px 20px;
  margin: -30px -40px 25px; /* Negative margin to reach the container edges */
  border-top-left-radius: var(--fs-form-border-radius);
  border-top-right-radius: var(--fs-form-border-radius);
  border-bottom: 1px solid #f0f0f0; /* Subtle border per mockup */
  text-align: center;
  font-family: 'Inter', sans-serif; /* Match mockup font */
}

.fs-login-header .fs-login-logo {
  max-width: 100px; /* Pixel perfect per mockup */
  margin: 0 auto 15px;
  height: auto;
  display: block;
}

.fs-login-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: var(--primary-dark);
}

.fs-login-header p {
  font-size: 14px; /* Exact pixel size per mockup */
  color: var(--text-secondary); /* Use mockup variable directly */
  margin: 8px 0 0 0; /* Match mockup: 8px top margin */
}

/*
  Maximum specificity overrides to ensure Inter font and weight 600 apply
*/
.fs-login-form .fs-login-header h2,
body .fs-login-form .fs-login-header h2,
html body .fs-login-form .fs-login-header h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  color: var(--primary-dark) !important;
}

/*
  Even higher specificity for DXPR theme body classes
*/
body.dxpr-theme .fs-login-form .fs-login-header h2,
html body.dxpr-theme .fs-login-form .fs-login-header h2,
.dxpr-scheme-custom .fs-login-form .fs-login-header h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
}

/*
  5. Social Login Buttons
  Uses global btn-social class from buttons.css
  Additional styling specific to login form layout
  
  TEMPORARILY DISABLED for passwordless authentication flow
  TODO: Re-evaluate social login integration with email-based passwordless authentication
*/
.fs-social-login-wrapper {
  margin-bottom: 25px;
  /* Temporarily hidden for passwordless flow */
  display: none !important;
}

/* Fix for social login buttons - matching template classes */
.fs-social-login {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px; /* Space between buttons per mockup */
  margin-bottom: 25px;
}

/* Social buttons use global btn-social class from buttons.css */

/*
  6. "OR" Divider
  Element added via hook_form_alter.
  
  TEMPORARILY DISABLED for passwordless authentication flow
  TODO: Re-evaluate when social login is re-enabled
*/
.fs-or-divider {
  text-align: center;
  /* Temporarily hidden for passwordless flow */
  display: none !important;
  align-items: center;
  text-align: center;
  color: var(--dxt-color-text-muted, var(--fs-medium-gray-fallback));
  margin: 25px 0;
  font-size: 0.875rem; /* Approx 14px */
  font-weight: 500;
}

.fs-or-divider::before,
.fs-or-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--dxt-color-border, var(--dxt-color-graylight, var(--fs-medium-gray-fallback)));
}

.fs-or-divider span { /* The actual "or" text */
  padding: 0 15px;
}

/*
  7. Form Input Fields (Username/Email, Password)
  Styling for Drupal's form items and input elements.
  Custom classes 'fs-form-item' and 'fs-form-input-wrapper' added via hook_form_alter.
*/
/* Drupal's .form-item wrapper */
.fs-login-form .description {
  text-align: left;
}

.form-item.fs-form-item {
  margin-bottom: 20px;
  text-align: left;
  width: 100%; /* Ensure all form items take full width */
}

.form-item.fs-form-item label {
  display: block;
  font-weight: 500; /* Mockup specific */
  margin-bottom: 8px;
  color: var(--dxt-color-headings, var(--fs-dark-gray-fallback));
  font-size: 0.875rem; /* Approx 14px */
}

/* Custom wrapper for icon positioning */
.fs-form-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;
}

/* Ensure the icon is properly positioned within the input field */
.fs-form-input-wrapper .fs-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dxt-color-text-muted, #95a5a6);
  font-size: 16px; /* Exact size per mockup */
  z-index: 2;
  pointer-events: none; /* So it doesn't interfere with input focus */
}

/* Core input fields */
form.fs-login-form input[type="text"],
form.fs-login-form input[type="email"],
form.fs-login-form input[type="password"] {
  font-family: var(--dxt-setting-body-font-face, 'Inter', sans-serif);
  width: 100%;
  padding: 12px 45px 12px 40px; /* extra right padding for eye button */
  border: 1px solid #e0e0e0; /* Exact color per mockup */
  border-radius: 8px; /* Exact radius per mockup */
  font-size: 14px; /* Exact size per mockup */
  color: var(--dxt-color-text, #2c3e50);
  background-color: #f9f9f9; /* Exact color per mockup */
  transition: all 0.3s;
  box-sizing: border-box;
  height: auto; /* Override any theme defaults */
  line-height: 1.5;
}

/* View Password toggle positioning */
.fs-form-input-wrapper > .shwpd {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0; /* hide fallback glyph */
}

.fs-form-input-wrapper > .shwpd.eye-open::before,
.fs-form-input-wrapper > .shwpd.eye-close::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  color: var(--dxt-color-text-muted, #95a5a6);
}

.fs-form-input-wrapper > .shwpd.eye-open::before { content: "\f06e"; } /* fa-eye */
.fs-form-input-wrapper > .shwpd.eye-close::before { content: "\f070"; } /* fa-eye-slash */

form.fs-login-form input[type="text"]:focus,
form.fs-login-form input[type="email"]:focus,
form.fs-login-form input[type="password"]:focus {
  border-color: var(--dxt-color-primary, #3498db); /* Use primary color from mockup */
  background-color: #fff; /* White background when focused */
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* Exact shadow per mockup */
}

/*
  8. "Remember Me" Checkbox
  Styling for the persistent_login checkbox and its label.
*/
.form-item-persistent-login.fs-form-item-checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 25px;
  text-align: left;
}

.form-item-persistent-login.fs-form-item-checkbox input[type="checkbox"].form-checkbox {
  /* Leverage Bootstrap 5 / DXPR styling for checkboxes if possible */
  /* If custom styling is needed, it would go here */
  margin-top: 0.1em; /* Minor adjustment for vertical alignment with label */
  margin-right: 0.5em;
}

.form-item-persistent-login.fs-form-item-checkbox label.option {
  font-weight: normal; /* Override default label weight if too bold */
  margin-bottom: 0; /* Align with checkbox */
  color: var(--dxt-color-text, var(--fs-dark-gray-fallback));
  font-size: 0.875rem; /* Approx 14px */
}

/* Hide default Drupal password description */
.fs-login-form #edit-pass--description {
  display: none;
}

/* Password confirmation message styling 
  Fix alignment issue with the password match indicator
*/
.fs-form-input-wrapper .password-confirm-message {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  font-size: 12px;
  margin-top: 4px;
  color: var(--dxt-color-text-secondary, #666);
  z-index: 1;
}

.confirm-parent {
  position: relative;
  margin-bottom: 25px; /* Extra space for the message */
  width: 100%; /* Ensure same width as other input wrappers */
}

.password-parent {
  width: 100%; /* Ensure same width as other input wrappers */
}

/*
  Checkbox styling improvements
  Fix alignment of terms checkbox with its label
*/
.fs-form-item-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.fs-form-item-checkbox input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  margin-top: 7px; /* Align with first line of text */
}

.fs-form-item-checkbox label {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dxt-color-text, #333);
}

.fs-form-item-checkbox label a {
  color: var(--dxt-color-base, #007bff);
  text-decoration: none;
}

.fs-form-item-checkbox label a:hover {
  text-decoration: underline;
}

/*
  9. Submit Button
  Buttons now use global button styling from buttons.css
  Authentication forms automatically get button--block class for full width
*/
form.fs-login-form .form-actions {
  margin-top: 25px;
}

/* Make submit buttons full width in auth forms */
form.fs-login-form .form-actions input[type="submit"],
form.fs-login-form .form-actions button[type="submit"] {
  width: 100%;
}

/*
  10. Footer Links (Sign Up, Forgot Password)
  Elements added via hook_form_alter.
*/
form.fs-login-form {
  background-color: var(--fs-form-bg); /* Use new explicit form background */
  padding: 30px 40px;
  border-radius: var(--fs-form-border-radius);
  box-shadow: var(--dxt-setting-block-shadow, var(--fs-shadow-medium));
  border: var(--dxt-setting-block-border-width, 1px) solid var(--dxt-setting-block-border-color, var(--dxt-color-graylighter, var(--fs-medium-gray-fallback)));
  width: 100%;
  max-width: 450px; /* Mockup constraint */
  /* Remove text-align center so nested descriptions stay left-aligned */
}

.fs-login-footer {
  text-align: center;
  margin-top: 30px;
  font-size: 0.875rem; /* Approx 14px */
}

.fs-login-footer p {
  margin-bottom: 10px;
  color: var(--dxt-color-text-muted, #6c757d);
}

.fs-login-footer p:last-child {
  margin-bottom: 0;
}

.fs-login-footer a {
  color: var(--dxt-color-link, var(--dxt-color-primary, #0d6efd));
  text-decoration: none;
  font-weight: 500;
}

.fs-login-footer a:hover,
.fs-login-footer a:focus {
  text-decoration: underline;
  color: var(--dxt-color-link-hover, var(--dxt-color-primary-darken, #0b5ed7));
}

/*
  11. Accessibility Enhancements
*/
/* Ensure focus visibility is clear and consistent */
form.fs-login-form :focus-visible {
  outline: 2px solid var(--dxt-color-primary-lighten, var(--dxt-color-primary, #0d6efd)); /* Use a lighter primary or primary for outline */
  outline-offset: 2px;
  box-shadow: none; /* Prefer outline over box-shadow for focus if not already handled well by DXPR/Bootstrap */
}

/*
  12. Responsive Adjustments
  Adjustments for smaller screen sizes to maintain usability.
*/
/*
  13. Background Color Overrides
  Forcefully make wrapper elements transparent to ensure the body's
  gray background is visible. This is to counteract potential
  overrides from base themes (DXPR, Bootstrap).
*/
.path-user-login .dialog-off-canvas-main-canvas,
.path-user-login main#main-content,
.path-user-login .region-content {
  background-color: transparent;
}

@media (max-width: 480px) {
  form.fs-login-form {
    padding: 39px inherit;
    margin-left: -5px; /* Counteract small negative margin from some Bootstrap containers */
    margin-right: -5px;
  }

  .fs-login-header .fs-login-logo {
    max-width: 150px;
  }

  .fs-login-header h2 {
    font-size: 1.75rem; /* Approx 28px */
  }

  .fs-login-header p {
    font-size: 0.9375rem; /* Approx 15px */
    margin-bottom: 25px;
  }

  .fs-social-login-wrapper .social-btn {
    padding: 10px;
    font-size: 0.875rem; /* Approx 14px */
  }

  form.fs-login-form input[type="text"],
  form.fs-login-form input[type="email"],
  form.fs-login-form input[type="password"] {
    padding: 10px 10px 10px 40px; /* Adjust padding for smaller inputs */
    font-size: 0.9375rem;
  }

  .fs-form-input-wrapper i.fs-input-icon {
    font-size: 0.9375rem; /* Approx 15px */
    left: 12px;
  }
}

/* Name field wrapper - combines first and last name */
.fs-name-field-wrapper {
  display: flex;
  gap: 10px;
  position: relative;
}

/* Icon for name field wrapper */
.fs-name-field-wrapper::before {
  content: '\f007'; /* Font Awesome user icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 12px;
  top: 12px;
  color: var(--dxt-color-text-muted, #95a5a6);
  font-size: 16px;
  z-index: 2;
  pointer-events: none;
}

/* Adjust first name field to have icon space */
.fs-name-field-wrapper input:first-child {
  padding-left: 40px;
}

/* Make name fields appear connected */
.fs-name-field-wrapper input {
  flex: 1;
}

/*
  14. Social Login Styles (consolidated)
*/
.fs-social-login-wrapper {
  margin-bottom: 25px;
}

.fs-social-login {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px; /* Space between buttons per mockup */
  margin-bottom: 25px;
}

/* Social buttons use global btn-social class from buttons.css */

/*
  15. Points Registration Pane Styles
  Low contrast pre-filled form for blocked users during checkout
*/
.points-registration-pane {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(248, 249, 250, 0.8);
  border-radius: 8px;
  opacity: 0.8; /* Low contrast as specified */
  font-size: 0.9em; /* Smaller font as specified */
}

.points-registration-pane .pane-guidance {
  color: #6c757d;
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* Pre-filled information section */
.prefilled-info-section {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.prefilled-info-section .prefilled-title {
  font-size: 1.1rem;
  color: #495057;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.prefilled-info-section .info-item {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
}

.prefilled-info-section .info-label {
  font-weight: 500;
  color: #6c757d;
  min-width: 80px;
  margin-right: 1rem;
}

.prefilled-info-section .info-value {
  color: #495057;
}

.prefilled-info-section .edit-info-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85em;
  color: #007bff;
  text-decoration: underline;
}

/* Points display section */
.points-display-section {
  background: #e3f2fd;
  padding: 1.5rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  text-align: center;
}

.points-display-section .points-amount {
  font-size: 2rem;
  font-weight: 600;
  color: #1976d2;
  margin-bottom: 0.25rem;
}

.points-display-section .points-description {
  color: #5c6bc0;
  font-size: 0.95rem;
}

/* Agreements section */
.agreements-section {
  background: white;
  padding: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.agreements-section .form-item {
  margin-bottom: 1rem;
}

.agreements-section .form-checkbox {
  margin-right: 0.5rem;
}

.agreements-section label {
  font-weight: normal;
  cursor: pointer;
}

.agreements-section .form-required {
  color: #dc3545;
}

/* Responsive adjustments for registration pane */
@media (max-width: 768px) {
  .points-registration-pane {
    padding: 1rem;
  }
  
  .prefilled-info-section .info-item {
    flex-direction: column;
  }
  
  .prefilled-info-section .info-label {
    margin-bottom: 0.25rem;
  }
}

/*
  13. Passwordless Help Page Specific Styling
  Styles specific to the passwordless help page (/help/passwordless)
  Uses DXPR theme variables for consistency
*/
.path-help .help-icon {
  font-size: 64px;
  color: var(--dxt-color-base, var(--primary-color));
  display: inline-block;
  margin-bottom: 20px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

.path-help h2 {
  color: var(--dxt-color-headings, var(--text-primary));
  font-size: var(--dxt-setting-h2-font-size, 2.375rem);
  margin-bottom: 20px;
}

.path-help .info-box {
  background: var(--dxt-color-graylighter, var(--primary-light));
  border-left: 4px solid var(--dxt-color-base, var(--primary-color));
  padding: 20px;
  border-radius: var(--fs-border-radius-standard);
  margin: 30px 0;
}

.path-help .info-box i {
  color: var(--dxt-color-base, var(--primary-color));
}