/* ============================================
   TestDriveForm 表单专用样式
   参考 style.scss 136-305 行
   ============================================ */
.testdrive-container,
.testdrive-form-message,
.testdrive-container .inputmod,
.testdrive-container .selectmod,
.testdrive-container .form-submit {
  font-size: 24px;
}

/* ---------- 基础表单容器 ---------- */
.testdrive-form {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.testdrive-container {
  width: 90%;
  padding: 40px;
  margin: 32vh auto 5vh;
  position: relative;
  box-sizing: border-box;
}

/* ---------- 表单行 ---------- */
.testdrive-container .label {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #fff;
  gap: 20px;
  color: #fff;
  margin-top: 20px;
  padding: 20px 0;
}

.testdrive-container .label:first-child {
  margin-top: 0;
}

.testdrive-container .label>label:first-child {

  color: #fff;
  flex-shrink: 0;
}

/* ---------- 输入框 ---------- */
.testdrive-container .inputmod,
.testdrive-container .selectmod {
  flex: 1;
  height: 100%;
  color: #fff;
  background: transparent;
  border-radius: 0;
  border: none;
  outline-style: none;

}

.testdrive-container .inputmod::placeholder {
  color: #fff;
}

/* 验证码输入框 */
.testdrive-container .inputmod.code {
  width: 50%;
  text-align: left;
  flex: none;
}

/* ---------- 下拉选择框 ---------- */
.testdrive-container .selectmod option {
  color: #000;
}

/* ---------- 单选/复选按钮组 ---------- */
.testdrive-container .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
  flex-wrap: wrap;
}

.testdrive-container .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.testdrive-container .checkbox-icon {
  width: 24px;
  height: 24px;
  border: 1px solid #fff;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}

.testdrive-container .checkbox-icon::before {
  content: "";
  width: 50%;
  height: 50%;
  background-color: #fff;
  display: none;
}

/* 单选样式（称谓、是否接收资讯） */
.testdrive-container .gender-group,
.testdrive-container .followup-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 选中状态 */
.testdrive-container .checkbox.active .checkbox-icon::before {
  display: block;
}

/* ---------- 获取验证码按钮 ---------- */
.testdrive-container .sendcode_btn {
  border: 1px solid #fff;
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
  margin-left: auto;
}

.testdrive-container .sendcode_btn.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* ---------- 隐私协议区域 ---------- */
.testdrive-container .agrees {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testdrive-container .agrees .checkbox {
  align-items: flex-start;
}

.testdrive-container .agrees .checkbox-label {
  line-height: 1.4;
}

.testdrive-container .privacy-link {
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- 提交按钮 ---------- */
.testdrive-container .form-submit {
  width: 100%;
  height: 80px;
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 600;
  letter-spacing: 20px;
  text-transform: uppercase;
  margin-top: 40px;
  cursor: pointer;
}

.testdrive-container .form-submit[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- 提示消息 ---------- */
.testdrive-form-message {
  min-width: 400px;
  color: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 999999999;
  text-align: center;
  background: rgba(30, 30, 30, 0.85);
  border-radius: 3px;
  padding: 30px 60px;
  display: none;
}

.testdrive-form-message.show {
  display: block;
}

/* ============================================
   iPad 横屏适配
   ============================================ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) {

  .testdrive-container,
  .testdrive-form-message,
  .testdrive-container .inputmod,
  .testdrive-container .selectmod,
  .testdrive-container .form-submit {
    font-size: 18px;
  }

  .testdrive-container {
    width: 44%;
    margin: 5vh 0 0 3.066667vw;
    padding: 25px;
  }

  .testdrive-container .label {
    gap: 15px;
  }

  .testdrive-container .checkbox,
  .testdrive-container .checkbox-label {
    gap: 10px;
  }

  .testdrive-container .checkbox-icon {
    width: 18px;
    height: 18px;
    margin-top: 4px;
  }

  .testdrive-container .form-submit {
    height: 60px;
  }
}

/* ============================================
   iPad 竖屏适配
   ============================================ */
@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {

  .testdrive-container,
  .testdrive-form-message,
  .testdrive-container .inputmod,
  .testdrive-container .selectmod,
  .testdrive-container .form-submit {
    font-size: 18px;
  }

  .testdrive-container {
    width: 65%;
    padding: 25px;
    margin-top: 36vh;
  }

  .testdrive-container .label {
    gap: 15px;
  }

  .testdrive-container .checkbox,
  .testdrive-container .checkbox-label {
    gap: 10px;
  }

  .testdrive-container .checkbox-icon {
    width: 18px;
    height: 18px;
    margin-top: 4px;
  }

  .testdrive-container .form-submit {
    height: 60px;
  }
}

@media screen and (min-width: 1367px) {

  .testdrive-container,
  .testdrive-form-message,
  .testdrive-container .inputmod,
  .testdrive-container .selectmod,
  .testdrive-container .form-submit {
    font-size: 14px;
  }

  .testdrive-container {
    width: 80%;
    padding: 13px;
    margin-top: 10vh;
  }

  .testdrive-container .label {
    gap: 7px;
    padding: 10px 0;
    margin-top: 10px;
  }


  .testdrive-container .checkbox,
  .testdrive-container .checkbox-label {
    gap: 5px;
  }

  .testdrive-container .checkbox-icon {
    width: 12px;
    height: 12px;
    margin-top: 3px;
  }

  .testdrive-container .sendcode_btn {
    padding: 5px 10px;
  }

  .testdrive-container .agrees {
    margin-top: 20px;
    gap: 10px;
  }

  .testdrive-container .form-submit {
    height: 40px;
  }
}