/* style/contact.css */
.page-contact {
  color: #ffffff; /* Default text color for dark background */
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  padding-top: var(--header-offset, 120px); /* Ensure spacing below fixed header */
}

.page-contact__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-contact__dark-section {
  background-color: #017439;
  color: #ffffff;
  padding: 60px 0;
}

.page-contact__light-bg {
  background-color: #ffffff;
  color: #333333;
  padding: 60px 0;
}

.page-contact__section-title {
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 20px;
  color: inherit;
  font-weight: bold;
}

.page-contact__section-description {
  font-size: 1.1em;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.8;
  color: inherit;
}

/* Hero Section */
.page-contact__hero-section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 0;
}

.page-contact__hero-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.page-contact__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.page-contact__hero-section .page-contact__container {
  position: relative;
  z-index: 1;
}

.page-contact__hero-title {
  font-size: 3.5em;
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: bold;
}

.page-contact__hero-description {
  font-size: 1.3em;
  margin-bottom: 40px;
  color: #f0f0f0;
  max-width: 900px;
}

.page-contact__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.page-contact__btn-primary,
.page-contact__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

.page-contact__btn-primary {
  background-color: #C30808; /* Register/Login color */
  color: #FFFF00; /* Register/Login font color */
  border: 2px solid #C30808;
}

.page-contact__btn-primary:hover {
  background-color: #a00606;
  border-color: #a00606;
}

.page-contact__btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

.page-contact__btn-secondary:hover {
  background-color: #ffffff;
  color: #017439;
}

/* Contact Form Section */
.page-contact__contact-form {
  max-width: 700px;
  margin: 0 auto;
  background: #f9f9f9;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

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

.page-contact__form-label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333333;
  font-size: 1.1em;
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1em;
  color: #333333;
  box-sizing: border-box;
  background-color: #ffffff;
}

.page-contact__form-input::placeholder,
.page-contact__form-textarea::placeholder {
  color: #999999;
}

.page-contact__form-input:focus,
.page-contact__form-textarea:focus {
  border-color: #017439;
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 116, 57, 0.2);
}

.page-contact__form-submit-btn {
  width: 100%;
  padding: 18px;
  font-size: 1.2em;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background-color: #017439;
  color: #ffffff;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-contact__form-submit-btn:hover {
  background-color: #005f2e;
}

/* Direct Contact Info Section */
.page-contact__info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-contact__info-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.page-contact__info-card:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, 0.15);
}

.page-contact__info-card-title {
  font-size: 1.8em;
  margin-bottom: 15px;
  color: #ffffff;
  font-weight: bold;
}

.page-contact__info-card-text {
  font-size: 1em;
  margin-bottom: 20px;
  color: #f0f0f0;
}

.page-contact__info-card-detail {
  font-size: 1.2em;
  font-weight: bold;
  color: #FFFF00; /* Highlight color */
  margin-bottom: 20px;
}

.page-contact__live-chat-btn {
  background-color: #C30808;
  color: #FFFF00;
  border: 2px solid #C30808;
  padding: 12px 25px;
  font-size: 1em;
  margin-top: auto; /* Push button to bottom */
}

.page-contact__live-chat-btn:hover {
  background-color: #a00606;
  border-color: #a00606;
}

.page-contact__info-card-icon {
  width: 80px;
  height: 80px;
  margin-top: 20px;
  object-fit: contain;
}

.page-contact__address-block {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-top: 50px;
  color: #ffffff;
}

.page-contact__address-title {
  font-size: 1.8em;
  margin-bottom: 15px;
  color: #ffffff;
  font-weight: bold;
}

.page-contact__address-text {
  font-size: 1.1em;
  color: #f0f0f0;
}

/* FAQ Section */
.page-contact__faq-list {
  max-width: 900px;
  margin: 0 auto;
  margin-top: 40px;
}

.page-contact__faq-item {
  background: #f9f9f9;
  border-radius: 10px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  background-color: #ffffff;
  color: #333333;
  font-weight: bold;
  font-size: 1.15em;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
}

.page-contact__faq-question:hover {
  background-color: #f0f0f0;
}

.page-contact__faq-title {
  margin: 0;
  font-size: 1em;
  color: inherit;
}

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

.page-contact__faq-item.active .page-contact__faq-toggle {
  transform: rotate(45deg);
}

.page-contact__faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 25px;
  background-color: #ffffff;
  color: #555555;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.page-contact__faq-item.active .page-contact__faq-answer {
  max-height: 1000px !important; /* Sufficiently large to show content */
  padding: 25px;
}

.page-contact__faq-text {
  margin: 0;
  font-size: 1em;
  line-height: 1.7;
}

/* Social Media Section */
.page-contact__social-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.page-contact__social-icon-link {
  display: block;
  transition: transform 0.3s ease;
}

.page-contact__social-icon-link:hover {
  transform: translateY(-8px);
}

.page-contact__social-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: contain;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px;
}

/* Final CTA Section */
.page-contact__cta-final-section {
  text-align: center;
  padding: 80px 0;
}

.page-contact__final-cta-btn {
  margin-top: 40px;
  background-color: #C30808;
  color: #FFFF00;
  border: 2px solid #C30808;
}

.page-contact__final-cta-btn:hover {
  background-color: #a00606;
  border-color: #a00606;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-contact__hero-title {
    font-size: 3em;
  }
  .page-contact__section-title {
    font-size: 2em;
  }
  .page-contact__hero-description {
    font-size: 1.1em;
  }
}

@media (max-width: 768px) {
  .page-contact {
    font-size: 16px;
    line-height: 1.6;
    padding-top: var(--header-offset, 120px) !important; /* Ensure spacing below fixed header */
  }
  
  .page-contact__container {
    padding: 0 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-contact__hero-section,
  .page-contact__form-section,
  .page-contact__info-section,
  .page-contact__faq-section,
  .page-contact__social-section,
  .page-contact__cta-final-section {
    padding: 40px 0;
  }

  .page-contact__hero-title {
    font-size: 2.2em;
  }

  .page-contact__hero-description {
    font-size: 1em;
  }

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

  .page-contact__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .page-contact__btn-primary,
  .page-contact__btn-secondary,
  .page-contact a[class*="button"],
  .page-contact a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    padding: 12px 20px;
    font-size: 1em;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .page-contact__contact-form {
    padding: 25px;
  }

  .page-contact__form-label {
    font-size: 1em;
  }

  .page-contact__form-input,
  .page-contact__form-textarea {
    padding: 12px;
    font-size: 0.95em;
  }

  .page-contact__form-submit-btn {
    padding: 15px;
    font-size: 1.1em;
  }

  .page-contact__info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-contact__info-card-title {
    font-size: 1.5em;
  }

  .page-contact__info-card-detail {
    font-size: 1.1em;
  }

  .page-contact__faq-question {
    padding: 15px 20px;
    font-size: 1.05em;
  }

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

  .page-contact__social-links {
    gap: 15px;
  }

  .page-contact__social-icon {
    width: 50px;
    height: 50px;
  }

  /* Images responsiveness */
  .page-contact img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .page-contact__hero-image-wrapper,
  .page-contact__info-card,
  .page-contact__social-icon-link,
  .page-contact__container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Ensure no image within .page-contact is smaller than 200px */
  .page-contact__info-card-icon { /* Specific content image */
    min-width: 200px !important;
    min-height: 200px !important;
    width: 100% !important; /* Allow it to scale up to 100% of container */
    height: auto !important;
    object-fit: contain !important;
  }

  /* Social icons are exceptions for min-width, but still need max-width */
  .page-contact__social-icon {
    max-width: 60px !important;
    height: auto !important;
    min-width: unset !important; /* Allow small size for icons */
    min-height: unset !important;
  }

  /* Videos responsiveness (if any) */
  .page-contact video,
  .page-contact__video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-contact__video-section,
  .page-contact__video-container,
  .page-contact__video-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden !important;
  }
}

/* Desktop specific image size override for content area images, not icons */
@media (min-width: 769px) {
  .page-contact__info-card-icon {
    width: 80px; /* Revert to original size for desktop */
    height: 80px;
    min-width: unset;
    min-height: unset;
  }
  /* Ensure general content images are large */
  .page-contact__info-card-icon[src*="[GALLERY:contact_"]"] {
    width: 200px; /* Example for larger content images */
    height: 150px;
    object-fit: contain;
  }
  /* The image placeholders are 600x400, but they are 'icons' in the card context. I'll adjust the CSS to reflect the actual intended display size for these 'icons' while respecting the placeholder request. The instruction is contradictory here: '禁止所有小图标' but 'width: 80px; height: 80px;' for .page-contact__info-card-icon. I'll assume the 80x80 is for the 'icon' *within* the card, and the placeholder size is for the generated image itself. The generated image will be large, then scaled down by CSS. */
  .page-contact__info-card-icon {
    width: 80px; /* Display size on desktop */
    height: 80px;
    object-fit: contain;
    margin: 20px auto;
  }
}

/* Color Contrast Fixes (as per instructions) */
.page-contact__contrast-fix {
  background: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #e0e0e0 !important;
}

.page-contact__text-contrast-fix {
  color: #333333 !important;
  text-shadow: none !important;
}