/* Should you need to overwrite any of our SCSS or LESS or SASS code need to add any custom code, We recommend that you add your code into this file, so whenever theme update is available and you update the theme, You will not lose your hard work :) */
/* ======== Modal Styles ======== */

@media (max-width: 600px) {
  .navbar-brand {
    margin-right: auto;
  }
  #logo {
    max-width: 120px;
  }

  .attr-nav {
    margin-left: auto;
    margin-right: 50px;
  }

  .quote-button {
    font-size: 0.8rem !important;
  }

  .custom-list-style {
    gap: 0.8rem !important;
  }
}

html[lang="zh"] .en-show {
  display: none;
}

html[lang="en"] .zh-show {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  display: none;
  /* Hidden by default */
  align-items: center;
  justify-content: center;
}

.modal-overlay.show-modal {
  display: flex;
}

.modal-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 900px;
  /* Further reduced width */
  position: relative;
  padding: 25px 35px;
  /* Further reduced padding */
  max-height: 95vh;
  overflow-y: auto;
}

.modal-form-header {
  text-align: center;
  margin-bottom: 25px;
}

.modal-form-title {
  font-size: 26px;
  font-weight: bold;
  color: #005aab;
  margin: 0 0 10px 0;
}

.modal-form-subtitle {
  font-size: 14px;
  color: #666;
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  border: none;
  background: transparent;
  font-size: 30px;
  /* Slightly smaller close button */
  color: #aaa;
  cursor: pointer;
}

.modal-content {
  display: flex;
  gap: 35px;
  /* Further reduced gap */
}

.modal-form-section {
  flex: 1.8;
  /* Adjusted flex ratio */
}

.modal-info-section {
  flex: 1.2;
  /* Adjusted flex ratio */
  background: url("../images/官网首页切片/16-表单/1.webp") no-repeat center
    center;
  background-size: cover;
  border-radius: 8px;
  padding: 25px;
  /* Adjusted padding */
  color: #003b71;
  display: flex;
  flex-direction: column;
}

.modal-form-intro {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  /* Adjusted margin */
}

/* Form Group Styling */
.form-group,
.form-group-inline {
  margin-bottom: 12px;
  /* Adjusted margin */
}

.form-group label,
.form-group-inline label {
  display: block;
  font-size: 13px;
  /* Adjusted font size */
  color: #333;
  margin-bottom: 6px;
  /* Adjusted margin */
}

.form-group input[type="text"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  /* Adjusted padding */
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 14px;
}

.form-group textarea {
  height: 70px;
  /* Adjusted height */
  resize: vertical;
}

.input-with-radio {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.input-with-radio input[type="text"] {
  border: none;
  flex-grow: 1;
}

.radio-group,
.radio-group.single,
.radio-group-transport {
  display: flex;
  align-items: center;
  padding: 0 10px;
  flex-wrap: wrap;
}

.radio-group label,
.radio-group.single label,
.radio-group-transport label {
  margin-right: 20px;
  cursor: pointer;
}

.form-group-inline {
  display: flex;
  align-items: center;
  gap: 15px;
  /* Add some space between the input and the radio/checkbox group */
}

.form-group-inline.no-label {
  /* specific styles if needed */
}

.form-group-inline input[type="text"] {
  flex-grow: 1;
  /* Allow the text input to take up available space */
}

.form-group-inline .radio-group {
  flex-shrink: 0;
  /* Prevent the radio group from shrinking */
  display: flex;
  align-items: center;
}

.form-submit-btn {
  display: flex;
  /* Use flexbox to center content */
  align-items: center;
  justify-content: center;
  width: 33.33%;
  /* One-third of the container's width */
  height: 50px;
  /* Doubled approximate height */
  margin: 0;
  /* Remove auto margin to align left */
  background-image: url("../images/官网首页切片/16-表单/按钮（蓝色）.webp");
  background-size: 100% 100%;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.form-submit-btn:hover {
  color: #095ba9;
  background-image: url("../images/官网首页切片/16-表单/按钮（金色）.webp");
}

.form-submit-btn img {
  margin-left: 8px;
  /* Adjusted margin */
  height: 12px;
  /* Adjusted height */
  width: auto;
}

.form-footer {
  text-align: left;
  /* Align text to the left */
  margin-top: 20px;
  /* Increase top margin for more space */
}

.form-footer p {
  font-size: 11px;
  /* Adjusted font size */
  color: #999;
  margin-top: 10px;
  /* Add some space above the paragraph */
}

/* Info Section Styling */
.modal-info-section h4 {
  font-size: 20px;
  /* Adjusted font size */
  font-weight: bold;
  margin: 0 0 25px 0;
  /* Adjusted margin */
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Adjusted gap */
  margin-bottom: 12px;
  /* Adjusted margin */
}

.info-item img {
  width: 18px;
  /* Set fixed width */
  height: 18px;
  /* Set fixed height */
}

.info-item p {
  font-size: 14px;
  font-weight: 500;
}

/* Remove old separator and contact styles */
.info-separator,
.info-wechat,
.info-phone {
  display: none;
}

/* New Contact Group Styling */
.info-contact-group {
  margin-top: 30px;
  color: #003b71;
  text-align: left;
  /* Ensure left alignment */
}

.info-contact-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  /* Space below icon */
}

/* Language-specific image switching for info-contact-icon */
html[lang="zh-CN"] .info-contact-icon2 {
  content: url("../images/官网首页切片/16-表单/图标3.webp") !important;
}

/* Remove the wrapper as it's no longer needed */
.info-contact-content {
  display: none;
}

.info-contact-group p {
  margin: 0;
  /* Reset margin for p */
}

.info-contact-title {
  font-weight: normal;
  font-size: 13px;
  margin-bottom: 8px;
}

.info-contact-line {
  font-size: 13px;
  line-height: 1.6;
  color: #003b71;
}

.info-highlight {
  font-size: 22px;
  font-weight: bold;
  display: block;
  margin-top: 5px;
}

.qr-code {
  width: 90px;
  height: 90px;
  margin-top: 10px;
  display: block;
}

.info-phone-number {
  font-size: 26px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  letter-spacing: 1px;
  margin-top: 8px;
}

/* Make sure the second group has enough space */

/* Responsive adjustments for the modal */
@media (max-width: 900px) {
  .modal-content {
    flex-direction: column;
    align-items: center;
  }

  .modal-form-section {
    flex: 1;
    max-width: 100%;
  }

  .modal-info-section {
    flex: 1;
    max-width: 100%;
  }
}