/**
 * Copyright (C) 2025 TitanFile Inc. All rights reserved.
 *
 * Author: Hani Kanaan <hkanaan@titanfile.com>
 *
 * Styles for modern React login and registration forms matching Zeplin design.
 */

/* Container Styles */
.tf-login-container,
.tf-registration-container {
  min-height: 100vh;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
}

/* Maintenance Notice */
.tf-maintenance-notice {
  background: #fff;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 16px;
  margin: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tf-notice-icon {
  color: #6c757d;
  font-size: 18px;
  margin-top: 2px;
}

.tf-notice-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}

.tf-notice-content p {
  margin: 0 0 8px 0;
  color: #6c757d;
  line-height: 1.4;
}

.tf-notice-content a {
  color: #007bff;
  text-decoration: none;
}

.tf-notice-content a:hover {
  text-decoration: underline;
}

/* Main Layout */
.tf-login-main,
.tf-registration-main {
  display: flex;
  flex: 1;
  min-height: 100%;
}

.tf-login-left,
.tf-registration-left {
  flex: 1;
  min-height: 100vh;
  overflow: scroll;
  padding: 40px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 50%;
  position: relative;
}

.tf-login-right,
.tf-registration-right {
  flex: 1;
  min-height: 100vh;
  overflow: hidden;
  background: #41AD49;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px 40px 40px;
}

/* Titles */
.tf-login-title,
.tf-registration-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 2rem;
  line-height: 1.3;
}

.tf-registration-subtitle {
  color: #666;
  margin-bottom: 24px;
  line-height: 1.4;
}

/* Access Info */
.tf-access-info {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.tf-access-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tf-access-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
}

.tf-messages-icon {
  background: #41AD49;
  color: white;
}

.tf-people-icon {
  background: #666;
  color: white;
}

.tf-count {
  font-size: 18px;
  font-weight: 600;
}

.tf-label {
  font-size: 14px;
}

/* Form Styles */
.tf-login-form,
.tf-registration-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tf-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tf-form-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.tf-form-input {
  width: 100%;
  padding-top: 12px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
  color: #374151;
  border: none;
  background: transparent;
  transition: all 0.15s ease-in-out;
  box-sizing: border-box;
}

.tf-form-input:focus {
  outline: none;
  border-color: #d1d5db;
  box-shadow: none;
  background-color: #fff;
}

.tf-form-input:hover:not(:focus) {
  border-color: #d1d5db;
}

.tf-form-input:disabled {
  background: #f9fafb;
  color: #6b7280;
  border-color: #e5e7eb;
}

.tf-form-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Password Field */
.tf-password-wrapper {
  position: relative;
}

.tf-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px;
}

.tf-password-toggle:hover {
  color: #333;
}

/* Form Row */
.tf-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
  width: 100%;
}

.tf-remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tf-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--tf-button-color);
}

.tf-checkbox-label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.tf-forgot-password {
  background: none;
  border: none;
  color: #007bff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.tf-forgot-password:hover {
  text-decoration: underline;
}

/* Password Requirements */
.tf-password-requirements {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 16px;
  margin-top: 8px;
}

.tf-requirements-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.tf-requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tf-requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 4px;
}

.tf-requirement-met {
  color: #28a745;
}

.tf-requirement-unmet {
  color: #dc3545;
}

.tf-password-mismatch {
  color: #dc3545;
  font-size: 14px;
  margin: 4px 0 0 0;
}

/* Submit Buttons */
.tf-submit-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  width: 24rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
}

.tf-next-btn,
.tf-login-btn,
.tf-register-btn,
.tf-continue-btn {
  background: var(--tf-button-color, #41AD49);
  color: white;
}

.tf-submit-btn:hover:not(:disabled) {
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: none;
}

.tf-login-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: none;
}

.tf-submit-btn:disabled {
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
}

/* Links */
.tf-link {
  color: #007bff;
  text-decoration: none;
}

.tf-link:hover {
  text-decoration: underline;
}

.tf-link-btn {
  background: none;
  border: none;
  color: #007bff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}

.tf-link-btn:hover {
  text-decoration: underline;
}

.tf-login-link {
  text-align: center;
  margin-top: 16px;
}

/* Footer */
.tf-login-footer,
.tf-registration-footer {
  margin-top: 32px;
  text-align: center;
}

.tf-terms-text {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin: 8px 0 40px 0;
}

.tf-login-footer-text {
  font-size: 14px;
  color: #ffffff;
  line-height: 1.4;
  opacity: 0.9;
  margin: 8px 0 0 0;
}

.tf-branding-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}

.tf-powered-by {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
}

/* Error Messages */
.tf-error-message {
  background: #f8d7da;
  color: #721c24;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #f5c6cb;
  font-size: 12px;
  margin-bottom: 8px;
}

/* Field Error Lists */
.tf-login-form ul.errorlist {
  background: #f8d7da;
  color: #721c24;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #f5c6cb;
  font-size: 14px;
  margin: 4px 0 8px 0;
  list-style: none;
}

.tf-login-form ul.errorlist li {
  margin: 0;
  padding: 0;
}

/* Branding Panel */
.tf-branding-panel {
  color: white;
  text-align: center;
  max-width: 90%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;
}

.tf-logo {
  margin-bottom: 40px;
}

.tf-logo img {
  max-width: 600px;
  max-height: 200px;
  display: block;
}

.tf-logo-text {
  font-size: 48px;
  font-weight: 300;
  display: block;
  margin-bottom: 8px;
}

.tf-logo-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  margin-left: 8px;
}

.tf-promo {
  background: white;
  color: #333;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  max-width: 100%;
}

.tf-outlook-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 500;
}

.tf-outlook-logo {
  color: #41AD49;
}

.tf-plus {
  font-size: 18px;
  color: #666;
}

.tf-outlook-icon {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #0078d4;
}

.tf-outlook-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.tf-outlook-content p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.tf-outlook-link {
  color: #007bff;
  font-size: 14px;
  text-decoration: none;
}

.tf-outlook-link:hover {
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
  .tf-login-main,
  .tf-registration-main {
    flex-direction: column;
  }

  .tf-login-right,
  .tf-registration-right {
    min-height: auto;
    height: auto;
    padding: 16px 24px;
    flex: none;
    overflow: visible;
    order: -1;
  }

  .tf-login-left,
  .tf-registration-left {
    max-width: none;
    padding: 24px 20px;
    min-height: auto;
    flex: 1;
    justify-content: flex-start;
  }

  .tf-access-info {
    flex-direction: column;
    gap: 12px;
  }

  .tf-form-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .tf-outlook-promo {
    max-width: none;
  }

  .tf-promo {
    display: none;
  }

  .tf-login-custom-info {
    display: none !important;
  }

  .tf-branding-panel {
    height: auto;
    justify-content: center;
    margin-bottom: 0 !important;
  }

  .tf-branding-content {
    flex-direction: row;
    justify-content: center;
  }

  .tf-logo {
    margin-bottom: 0 !important;
  }

  .tf-logo--spaced {
    margin-bottom: 0 !important;
  }

  .tf-logo img {
    max-width: 600px;
    max-height: 200px;
    display: block;
  }

  .tf-branding-form-container {
    padding-top: 20px;
    max-width: 100%;
    height: auto;
  }

  .tf-form-group--24rem {
    width: 100%;
    max-width: 24rem;
  }

  .tf-submit-btn {
    width: 100%;
    max-width: 24rem;
  }

  .tf-sso-btn--full {
    width: 100%;
    max-width: 21rem;
  }

  .tf-error-message--24rem {
    width: 100%;
    max-width: 24rem;
  }

  .tf-login-custom-info--borderless {
    width: 100%;
    max-width: 24rem;
  }

  .tf-form-row[style*="width: 24rem"] {
    width: 100% !important;
    max-width: 24rem;
  }

  .tf-login-content-wrapper {
    max-width: 100%;
    padding: 0 16px;
  }

  .tf-login-title {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    padding-top: 0 !important;
  }

  .tf-powered-by-footer {
    margin-top: 24px;
    margin-bottom: 16px;
  }
}

/* Two-Step Login Transitions */
.tf-password-step,
.tf-email-step {
  transition: all 0.3s ease-in-out;
  opacity: 1;
}

.tf-password-step[style*="display: none"],
.tf-email-step[style*="display: none"] {
  opacity: 0;
  transform: translateY(-10px);
}

.tf-continue-btn,
.tf-login-btn {
  transition: all 0.2s ease-in-out;
}

.tf-continue-btn:disabled,
.tf-login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tf-form-group {
  transition: all 0.3s ease-in-out;
}

/* Error message styling for two-step */
.tf-error-message {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
  text-align: center;
}

.tf-password-step.tf-error-message {
  margin-left: auto;
  margin-right: auto;
}

/* Loading state for buttons */
.tf-continue-btn .fa-spinner,
.tf-login-btn .fa-spinner {
  margin-right: 8px;
}

/* Form Group Modifiers */
.tf-form-group--horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  margin: 0 auto;
}

.tf-form-group--horizontal .tf-form-label {
  margin-right: 10px;
  white-space: nowrap;
}

/* Form Input Modifiers */
.tf-form-input--underline {
  flex: none;
  width: 100%;
  min-width: 200px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
}

.tf-login-custom-info {
  max-width: 75%;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  text-align: left;
}

.tf-login-custom-info a {
  color: #007bff;
  text-decoration: underline;
}

.tf-login-custom-info a:hover {
  text-decoration: none;
}

.tf-powered-by-footer {
  margin-top: auto;
  margin-bottom: 20px;
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* Layout Modifiers */
.tf-login-left--centered {
  align-items: center;
  justify-content: center;
}

.tf-login-content-wrapper {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tf-branding-form-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.tf-sso-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title Modifiers */
.tf-login-title--centered {
  margin-bottom: 2rem;
  text-align: center;
}

.tf-login-title--small {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

/* Form Element Sizing */
.tf-form-group--24rem {
  width: 24rem;
}

.tf-input-wrapper--16rem {
  width: 16rem;
  max-width: 100%;
  box-sizing: border-box;
}

.tf-error-message--24rem {
  width: 24rem;
}

/* Button Modifiers */
.tf-btn-text-white {
  color: #fff;
}

.tf-sso-btn--full {
  width: 21rem;
  border-radius: 4px;
  margin-bottom: 2rem;
  color: #fff;
}

/* Form Alignment */
.tf-login-form--centered {
  align-items: center;
}

/* Branding Panel Content */
.tf-branding-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.tf-logo--spaced {
  margin-bottom: 20px;
}

.tf-login-custom-info--white-bg {
  background-color: #fff;
}

.tf-login-custom-info--borderless {
  border: none;
  display: flex;
  justify-content: center;
  width: 30rem;
}

.tf-custom-text-content {
  padding-right: 0;
  padding-bottom: 0;
}

/* Powered By Section */
.tf-powered-by-link {
  color: #007bff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.tf-powered-by-link:hover {
  text-decoration: underline;
}

.tf-powered-by-logo {
  margin-left: 0;
}

.tf-form-content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.tf-login-container,
.tf-activate-container,
.tf-password-reset-confirm-container,
.tf-password-reset-container,
.tf-registration-closed-container {
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 768px) {
  html, body {
    height: auto;
    overflow: auto;
  }

  .tf-login-container,
  .tf-activate-container,
  .tf-password-reset-confirm-container,
  .tf-password-reset-container,
  .tf-registration-closed-container {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .tf-logo img {
    max-width: 180px !important;
    width: 180px !important;
    height: auto !important;
  }

  .tf-login-left--centered {
    justify-content: flex-start !important;
    padding-top: 24px;
  }

  .tf-login-title {
    margin-bottom: 1rem !important;
  }
}

.tf-password-toggle {
  right: 10px;
  z-index: 10;
}

.tf-password-wrapper .tf-form-input {
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
}

.tf-email-edit-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 8px;
  color: #666;
  font-size: 12px;
  z-index: 10;
  display: none;
  font-weight: 500;
}

.tf-email-edit-btn:hover {
  color: #333;
  text-decoration: underline;
}

.tf-email-wrapper {
  position: relative;
}

.tf-email-wrapper .tf-form-input {
  width: 100%;
  padding-right: 50px;
  box-sizing: border-box;
}

.tf-form-input:disabled,
.tf-form-input[readonly] {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.tf-submit-btn:disabled {
  background: var(--tf-button-hover-color, var(--tf-button-color));
  opacity: 0.5;
  cursor: not-allowed;
}

.tf-login-custom-info {
  word-break: break-word;
  overflow-wrap: break-word;
  max-height: 100px;
  overflow-y: auto;
}

.tf-qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem 0;
}

.tf-qr-code-container img {
  max-width: 200px;
  height: auto;
}

.tf-totp-key {
  font-family: monospace;
  font-size: 1.1rem;
  font-weight: 600;
  background-color: #f5f5f5;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  letter-spacing: 2px;
  margin: 1rem 0;
  text-align: center;
}

.tf-qr-instructions {
  text-align: center;
  color: #666;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .tf-qr-code-container img {
    max-width: 150px;
  }
}

.tf-verify-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 24rem;
}

.tf-pin-input {
  width: 100%;
  padding: 16px;
  font-size: 10pt;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5rem;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #d1d5db !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.tf-pin-input:focus {
  outline: none;
  border-color: var(--tf-button-color, #4CAF50) !important;
}

.tf-pin-input::placeholder {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
}

.tf-verify-info {
  max-width: 24rem;
  margin-bottom: 24px;
  text-align: center;
}

.tf-verify-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.tf-verify-submit-btn {
  margin-top: 20px;
  width: 100%;
  max-width: 24rem;
}

.tf-verify-links {
  margin-top: 24px;
  text-align: center;
}

.tf-verify-links a {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
  display: block;
  margin-bottom: 12px;
}

.tf-verify-links a:hover {
  text-decoration: underline;
}

.tf-remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
  max-width: 24rem;
}

.tf-remember-row label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.tf-ratelimit-error {
  color: #dc3545;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
  display: none;
}

.tf-blocked-info {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.tf-blocked-info strong {
  display: block;
  margin-bottom: 8px;
  color: #333;
}

@media (max-width: 768px) {
  .tf-verify-form,
  .tf-verify-info,
  .tf-verify-submit-btn,
  .tf-remember-row {
    max-width: 100%;
  }
}

.tf-2fa-methods {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 28rem;
}

.tf-2fa-method {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #fff;
}

.tf-2fa-method:hover {
  border-color: var(--tf-accent-color, var(--tf-button-color, #4CAF50));
  background: #f8fdf8;
}

.tf-2fa-method.selected {
  border-color: var(--tf-accent-color, var(--tf-button-color, #4CAF50));
  background: #f0fdf0;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.tf-2fa-method-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

.tf-2fa-method-icon {
  width: 48px;
  height: 48px;
  background: var(--tf-button-color, #4CAF50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tf-2fa-method-icon i {
  color: #fff;
  font-size: 20px;
}

.tf-2fa-method-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.tf-2fa-method-detail {
  flex: 1;
  text-align: left;
}

.tf-2fa-method-title {
  font-weight: 600;
  font-size: 15px;
  color: #333;
  margin: 0 0 4px 0;
}

.tf-2fa-method-desc {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.tf-2fa-phone-input {
  padding: 0 16px 16px 16px;
  display: none;
}

.tf-2fa-method.selected .tf-2fa-phone-input {
  display: block;
}

.tf-2fa-phone-input input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.tf-2fa-phone-input input:focus {
  outline: none;
  border-color: var(--tf-button-color, #4CAF50);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.tf-2fa-phone-error {
  color: #dc3545;
  font-size: 12px;
  margin-top: 6px;
  display: none;
}

.tf-2fa-phone-error:not(.hidden) {
  display: block;
}

.tf-2fa-consent {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin-top: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  display: none;
  max-width: 28rem;
}

.tf-2fa-consent:not(.hidden) {
  display: block;
}

.tf-2fa-info {
  max-width: 28rem;
  margin-bottom: 24px;
}

.tf-2fa-info p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

.tf-2fa-info a {
  color: #007bff;
  text-decoration: none;
}

.tf-2fa-info a:hover {
  text-decoration: underline;
}

.tf-2fa-form-errors {
  color: #dc3545;
  font-size: 14px;
  margin-bottom: 16px;
}

.tf-2fa-submit-btn {
  margin-top: 24px;
  width: 100%;
  max-width: 28rem;
}

.iti {
  width: 100%;
}

.iti__flag-container {
  z-index: 10;
}

@media (max-width: 768px) {
  .tf-2fa-methods,
  .tf-2fa-info,
  .tf-2fa-consent,
  .tf-2fa-submit-btn {
    max-width: 100%;
  }
}

#id_pin,
.tf-pin-input--legacy {
  text-align: center;
  font-size: 10pt;
  font-weight: 600;
  letter-spacing: 8px;
  width: 100%;
}

#id_pin::placeholder,
#id_pin::-webkit-input-placeholder,
#id_pin::-moz-placeholder,
#id_pin:-ms-input-placeholder,
.tf-pin-input--legacy::placeholder,
.tf-pin-input--legacy::-webkit-input-placeholder,
.tf-pin-input--legacy::-moz-placeholder,
.tf-pin-input--legacy:-ms-input-placeholder {
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: normal;
}

.tf-resend-success {
  background-color: #d4edda;
  color: #155724;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  display: none;
  text-align: center;
}

.tf-regen-link:hover {
  text-decoration: underline !important;
}

.tf-branding-form-container--full {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tf-logout-message {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: center;
  max-width: 24rem;
}

.tf-logout-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.tf-back-btn {
  background-color: #e0e0e0;
  color: #333;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s;
}

.tf-back-btn:hover {
  background-color: #d0d0d0;
  text-decoration: none;
  color: #333;
}

@media (max-width: 768px) {
  .tf-logout-buttons {
    flex-direction: column;
    width: 100%;
  }

  .tf-back-btn,
  .tf-logout-buttons .tf-submit-btn {
    width: 100%;
    text-align: center;
  }
}

.tf-password-wrapper--underline {
  width: 100%;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
}

.tf-password-wrapper--underline:focus-within {
  border-bottom-color: #007bff;
}

.tf-password-wrapper--underline input[type="password"],
.tf-password-wrapper--underline input[type="text"] {
  width: 100%;
  padding-right: 35px;
  box-sizing: border-box;
  border: none;
  padding: 8px 35px 8px 0;
  font-size: 16px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  outline: none;
}

.tf-form-group--horizontal-password .tf-password-wrapper,
.tf-form-group--horizontal-password input.tf-form-input {
  flex: 1;
  max-width: 16rem;
  margin-left: auto;
}

.tf-form-input--underline-alt {
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
  font-size: 16px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  outline: none;
  flex: 1;
  max-width: 16rem;
  margin-left: auto;
}

.tf-form-input--underline-alt:focus {
  border-bottom-color: #007bff;
}

.tf-owner-info {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

.tf-owner-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.tf-owner-details h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.tf-owner-details h4 {
  margin: 0.25rem 0 0 0;
  font-size: 0.9rem;
  color: #666;
  font-weight: normal;
}

.tf-access-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin: 2rem 0;
  list-style: none;
  padding: 0;
}

.tf-access-item--vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.tf-access-item--vertical img {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
}

.tf-access-item--vertical .unit {
  font-size: 0.9rem;
  color: #666;
}

.tf-password-strength-container {
  width: 16rem;
  margin-top: 0.5rem;
}

.tf-password-strength-bar {
  display: flex;
  gap: 4px;
  height: 4px;
  width: 100%;
}

.tf-password-strength-segment {
  flex: 1;
  height: 100%;
  background-color: #e0e0e0;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

.tf-password-strength-segment.active.weak {
  background-color: #d32f2f;
}

.tf-password-strength-segment.active.fair {
  background-color: #ff9800;
}

.tf-password-strength-segment.active.good {
  background-color: #ffc107;
}

.tf-password-strength-segment.active.strong {
  background-color: #4caf50;
}

.tf-password-strength-text {
  margin-top: 0.25rem;
  font-size: 12px;
  color: #666;
}

.tf-password-rules {
  background-color: #fff;
  border-radius: 4px;
  padding: 1rem;
  margin-top: 1rem;
}

.tf-password-rules h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.tf-password-rules ul {
  list-style-type: disc;
  margin: 0;
  padding-left: 1.5rem;
}

.tf-password-rules li {
  font-size: 12px;
  padding: 2px 0;
  color: #666;
}

.tf-button-group {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.tf-password-mismatch-error {
  display: none;
  padding: 10px;
  background-color: #ffebee;
  border-radius: 4px;
  color: #d32f2f;
  font-size: 12px;
  text-align: center;
}