.page-login {
  color: #ffffff; /* Light text for dark body background */
  background-color: transparent; /* Body background is handled by shared.css */
  padding-top: var(--header-offset, 120px);
}

.page-login__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-login__hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  text-align: center;
}

.page-login__hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.page-login__hero-content {
  position: relative;
  z-index: 2;
  padding: 40px;
  background: rgba(0, 0, 0, 0.6); /* Semi-transparent overlay for text readability */
  border-radius: 10px;
  max-width: 800px;
}

.page-login__main-title {
  font-size: 3.5em;
  color: #FFD700; /* Gold for main title */
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.page-login__lead-paragraph {
  font-size: 1.2em;
  margin-bottom: 30px;
  color: #f0f0f0;
}

.page-login__cta-button {
  display: inline-block;
  background-color: #FFD700; /* Gold button */
  color: #1A1A1A; /* Dark text for gold button */
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.page-login__cta-button:hover {
  background-color: #e6c200; /* Slightly darker gold on hover */
  transform: translateY(-3px);
}

.page-login__section-title {
  font-size: 2.5em;
  color: #FFD700;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 20px;
}

.page-login__section-description {
  font-size: 1.1em;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
  color: #f0f0f0;
}

.page-login__form-section {
  padding: 60px 0;
  background-color: #1A1A1A; /* Dark background for form section */
}

.page-login__login-form {
  background-color: rgba(255, 255, 255, 0.05); /* Slightly transparent white for form background */
  padding: 40px;
  border-radius: 10px;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.page-login__form-group {
  margin-bottom: 25px;
}

.page-login__form-label {
  display: block;
  margin-bottom: 10px;
  color: #FFD700;
  font-weight: bold;
}

.page-login__form-input {
  width: calc(100% - 20px); /* Adjust for padding */
  padding: 12px 10px;
  border: 1px solid #FFD700;
  border-radius: 5px;
  background-color: #2a2a2a;
  color: #ffffff;
  font-size: 1em;
}

.page-login__form-input::placeholder {
  color: #aaa;
}

.page-login__forgot-password {
  display: block;
  text-align: right;
  margin-bottom: 20px;
  color: #FFD700;
  text-decoration: none;
  font-size: 0.9em;
}

.page-login__forgot-password:hover {
  text-decoration: underline;
}

.page-login__submit-button {
  width: 100%;
  padding: 15px;
  background-color: #FFD700;
  color: #1A1A1A;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.page-login__submit-button:hover {
  background-color: #e6c200;
  transform: translateY(-2px);
}

.page-login__register-text {
  text-align: center;
  margin-top: 25px;
  color: #f0f0f0;
}

.page-login__register-link {
  color: #FFD700;
  text-decoration: none;
  font-weight: bold;
}

.page-login__register-link:hover {
  text-decoration: underline;
}

.page-login__process-section {
  padding: 80px 0;
  background-color: #0d0d0d;
}

.page-login__process-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.page-login__process-item {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.page-login__process-image {
  width: 100%; /* Ensure images are not smaller than 200px */
  max-width: 400px; /* Example max width, ensure min 200px */
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}

.page-login__process-step-title {
  font-size: 1.5em;
  color: #FFD700;
  margin-bottom: 15px;
}

.page-login__process-step-description {
  color: #f0f0f0;
  line-height: 1.6;
}

.page-login__security-section {
  padding: 80px 0;
  background-color: #1A1A1A;
}

.page-login__security-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.page-login__security-item {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.page-login__security-icon {
  width: 60px; /* Ensure images are not smaller than 200px. This is an exception for icons if shared component allows it, but for content, it should be larger. Adjusting to meet min 200px requirement for content images. */
  height: 60px; /* Adjusting for content area image size requirement */
  min-width: 200px; /* Enforcing minimum size for content images */
  min-height: 200px; /* Enforcing minimum size for content images */
  object-fit: contain;
  margin: 0 auto 20px auto;
  display: block;
}

.page-login__security-tip-title {
  font-size: 1.3em;
  color: #FFD700;
  margin-bottom: 10px;
}

.page-login__security-tip-description {
  color: #f0f0f0;
  line-height: 1.5;
}

.page-login__faq-section {
  padding: 80px 0;
  background-color: #0d0d0d;
}

.page-login__faq-items {
  max-width: 900px;
  margin: 0 auto;
}

.page-login__faq-item {
  background-color: rgba(255, 255, 255, 0.05);
  margin-bottom: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.page-login__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  background-color: #2a2a2a;
  color: #FFD700;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.page-login__faq-question:hover {
  background-color: #3a3a3a;
}

.page-login__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s ease;
}

.page-login__faq-item[open] .page-login__faq-toggle {
  transform: rotate(45deg);
}

.page-login__faq-answer {
  padding: 20px 25px;
  background-color: #1A1A1A;
  color: #f0f0f0;
  line-height: 1.6;
  font-size: 1em;
}

/* Responsive Design */
@media (max-width: 768px) {
  .page-login__hero-section {
    min-height: 400px;
    padding: 40px 20px;
  }

  .page-login__hero-content {
    padding: 20px;
  }

  .page-login__main-title {
    font-size: 2.5em;
  }

  .page-login__lead-paragraph {
    font-size: 1em;
  }

  .page-login__cta-button {
    padding: 12px 25px;
    font-size: 1em;
  }

  .page-login__section-title {
    font-size: 2em;
    margin-top: 40px;
    margin-bottom: 15px;
  }

  .page-login__section-description {
    font-size: 0.95em;
    margin-bottom: 30px;
  }

  .page-login__form-section {
    padding: 40px 0;
  }

  .page-login__login-form {
    padding: 30px;
  }

  .page-login__process-section,
  .page-login__security-section,
  .page-login__faq-section {
    padding: 50px 0;
  }

  .page-login__process-list,
  .page-login__security-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .page-login__process-image, .page-login__security-icon {
    max-width: 100%; /* Ensure images don't overflow on mobile */
    height: auto;
    min-width: 200px; /* Maintain minimum size */
    min-height: 200px; /* Maintain minimum size */
  }

  .page-login__faq-question {
    font-size: 1.1em;
    padding: 15px 20px;
  }

  .page-login__faq-answer {
    padding: 15px 20px;
  }
}

@media (max-width: 480px) {
  .page-login__main-title {
    font-size: 2em;
  }

  .page-login__lead-paragraph {
    font-size: 0.9em;
  }

  .page-login__section-title {
    font-size: 1.8em;
  }

  .page-login__section-description {
    font-size: 0.9em;
  }
}