/* style/login.css */

/* Base styles for the login page */
.page-login {
  font-family: Arial, sans-serif;
  color: #ffffff; /* Light text for dark body background */
  line-height: 1.6;
  background-color: transparent; /* Body handles the actual background */
  padding-bottom: 60px; /* Add some padding at the bottom */
}

/* Section styling */
.page-login__hero-section,
.page-login__features-section,
.page-login__form-section,
.page-login__faq-section {
  padding: 40px 20px;
  text-align: center;
}

.page-login__hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  overflow: hidden; /* Ensure content doesn't spill */
  padding-top: 10px; /* Small top padding, body handles header offset */
}

.page-login__hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.5); /* Darken image for better text contrast */
}

.page-login__hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  color: #ffffff;
}

.page-login__main-title {
  font-size: 2.8em;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ffffff;
  max-width: 100%; /* Ensure H1 doesn't overflow */
}

.page-login__description {
  font-size: 1.1em;
  margin-bottom: 30px;
  color: #f0f0f0;
}

.page-login__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
  width: 100%; /* Ensure container takes full width for wrapping */
  max-width: 500px;
  margin: 0 auto;
}

.page-login__btn-primary,
.page-login__btn-secondary,
.page-login__submit-button {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
  box-sizing: border-box; /* Include padding in width */
  max-width: 100%; /* Ensure buttons don't overflow */
}

.page-login__btn-primary {
  color: #ffffff;
  border: 2px solid transparent;
}

.page-login__btn-primary:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.page-login__btn-secondary {
  color: #ffffff;
  background-color: #26A9E0; /* Default auxiliary color */
  border: 2px solid #26A9E0;
}

.page-login__btn-secondary:hover {
  background-color: #1e87b7;
  transform: translateY(-2px);
}

.page-login__dark-bg {
  background-color: #1a1a1a; /* Slightly lighter dark background for contrast with body */
  color: #ffffff;
}

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

.page-login__section-title {
  font-size: 2.2em;
  margin-bottom: 30px;
  color: #26A9E0; /* Brand color for titles */
  font-weight: bold;
}

.page-login__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.page-login__feature-card {
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white on dark bg */
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
}

.page-login__feature-icon {
  width: 250px; /* Minimum 200px, but 250px is better for cards */
  height: 187px; /* Maintain 4:3 aspect ratio for 250x187.5 */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
}

.page-login__card-title {
  font-size: 1.5em;
  color: #26A9E0;
  margin-bottom: 15px;
  font-weight: bold;
}

.page-login__card-text {
  font-size: 1em;
  color: #f0f0f0;
}

.page-login__login-form {
  background: rgba(255, 255, 255, 0.08); /* Slightly transparent white for form background */
  padding: 40px;
  border-radius: 10px;
  max-width: 500px;
  margin: 30px auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  text-align: left;
}

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

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

.page-login__form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #333;
  border-radius: 5px;
  background-color: #2a2a2a;
  color: #ffffff;
  font-size: 1em;
  box-sizing: border-box;
}

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

.page-login__form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.9em;
}

.page-login__remember-me {
  display: flex;
  align-items: center;
}

.page-login__checkbox {
  margin-right: 8px;
}

.page-login__checkbox-label {
  color: #f0f0f0;
}

.page-login__forgot-password {
  color: #26A9E0;
  text-decoration: none;
}

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

.page-login__submit-button {
  width: 100%;
  padding: 15px;
  font-size: 1.1em;
  border: none;
  cursor: pointer;
  color: #ffffff;
  background-color: #EA7C07; /* Custom login button color */
}

.page-login__submit-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

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

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

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

/* FAQ Section */
.page-login__faq-section {
  background-color: #1a1a1a;
  padding-bottom: 60px;
}

.page-login__faq-list {
  max-width: 800px;
  margin: 30px auto 0 auto;
}

.page-login__faq-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: #ffffff;
  text-align: left;
}

.page-login__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  user-select: none;
}

/* Remove default details marker */
.page-login__faq-item summary::-webkit-details-marker {
  display: none;
}
.page-login__faq-item summary::marker {
  display: none;
}
.page-login__faq-item summary {
  list-style: none; /* For Firefox */
}

.page-login__faq-question:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.page-login__faq-qtext {
  flex-grow: 1;
  color: #26A9E0; /* Brand color for FAQ questions */
}

.page-login__faq-toggle {
  font-size: 1.5em;
  margin-left: 15px;
  color: #ffffff;
  transition: transform 0.3s ease;
}

.page-login__faq-item[open] .page-login__faq-toggle {
  transform: rotate(45deg); /* Rotate '+' to 'x' or similar */
}

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

/* Responsive Design */
@media (max-width: 1024px) {
  .page-login__main-title {
    font-size: 2.5em;
  }
  .page-login__section-title {
    font-size: 2em;
  }
}

@media (max-width: 768px) {
  .page-login__hero-section,
  .page-login__features-section,
  .page-login__form-section,
  .page-login__faq-section {
    padding: 30px 15px;
  }

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

  .page-login__description {
    font-size: 0.95em;
  }

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

  .page-login__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  /* Mobile-specific padding for content containers */
  .page-login__container,
  .page-login__features-grid,
  .page-login__login-form,
  .page-login__faq-list {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Images responsive */
  .page-login img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .page-login__feature-icon {
    width: 100% !important;
    height: auto !important;
    max-width: 250px !important; /* Keep a reasonable max-width for smaller images */
  }

  /* Buttons responsive */
  .page-login__btn-primary,
  .page-login__btn-secondary,
  .page-login__submit-button,
  .page-login a[class*="button"],
  .page-login a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .page-login__hero-section {
    padding-top: 10px !important; /* body already has offset */
  }
}

@media (max-width: 480px) {
  .page-login__main-title {
    font-size: 1.8em;
  }
  .page-login__section-title {
    font-size: 1.5em;
  }
  .page-login__faq-question {
    font-size: 1em;
    padding: 15px 20px;
  }
  .page-login__faq-answer {
    padding: 10px 20px 15px;
  }
}

/* Ensure content area images are not too small */
.page-login img:not(.page-login__feature-icon) {
    min-width: 200px;
    min-height: 200px;
}
/* For feature icons, ensure they are not too small, but allow them to be smaller than 200px if their natural aspect ratio dictates, as long as they are not "tiny icons" */
.page-login__feature-icon {
    min-width: 200px; /* Enforce minimum width */
    min-height: 150px; /* Approximate aspect ratio */
}