/* 基本表單行設定：每行中的欄位水平排列 */
.form-row {
  display: flex;
  flex-wrap: nowrap; /* 不换行，确保在同一行 */
  justify-content: space-between; /* 确保欄位之間的距離合适 */
  gap: 10px; /* 控制欄位之間的間距 */
  margin-bottom: 15px;
}

/* 控制欄位自適應寬度 */
.form-col {
  flex-grow: 1; /* 每個欄位平等分配空間 */
  flex-basis: 33%; /* 每個欄位占據三分之一的寬度 */
  padding: 0 5px; /* 調整欄位內部的左右邊距 */
  box-sizing: border-box;
}

/* 手機及其他小螢幕裝置的換行處理 */
@media (max-width: 768px) {
  .form-row {
    flex-wrap: wrap; /* 小螢幕時換行 */
  }
  .form-col {
    flex-basis: 100%; /* 每个欄位占據100%的寬度 */
    max-width: 100%;
  }
}


/* 設定表單的整體寬度，讓它不會過窄 */
.wpcf7-form {
  max-width: 1200px; /* 設定最大寬度 */
  width: 100%;
  text-align: left; /* 確保文字及表單內容靠左 */
  margin: 0 auto; /* 使表單居中 */
}

/* 隱藏原本的下拉選單箭頭，並自定義箭頭圖片 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff; /* 設定下拉選單的背景色 */
  border: 1px solid #ccc; /* 設定邊框 */
  padding: 10px;
  width: 100%; /* 設置下拉選單寬度 */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="%23ad935f" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>'); /* 使用自訂箭頭 */
  background-repeat: no-repeat;
  background-position: right 10px center; /* 調整箭頭的位置 */
  background-size: 30px; /* 調整箭頭大小 */
}



/* 確保下拉選單擁有足夠的右側內邊距，避免內容與箭頭重疊 */
select:focus {
  outline: none;
}

select:hover, select:focus {
  border-color: #999; /* 改變 hover 或 focus 時的邊框顏色 */
}

/* 欄位設置 */
textarea {
  width: 100%; /* 設置文本區域的寬度為父容器的 100% */
  max-width: 100%; /* 確保不超過最大寬度 */
  box-sizing: border-box; /* 確保內邊距與邊框包含在寬度內 */
}

/* 讓輸入框、文本區域和下拉選單都占據整行並靠左 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  background-color: transparent; /* 設置背景色為透明 */
  width: 100%; /* 確保它們占據整行 */
  max-width: 1200px; /* 設定最大寬度 */
  box-sizing: border-box; /* 包含內邊距與邊框 */
  display: block; /* 每個元素單獨占一行 */
  margin-bottom: 15px; /* 控制元素之間的距離 */
}

/* 讓標籤與輸入框保持靠左對齊 */
.wpcf7-form label {
  display: block; /* 確保標籤獨立占一行 */
  margin-bottom: 5px; /* 控制標籤與輸入框之間的距離 */
  text-align: left; /* 標籤文字靠左對齊 */
}

.wpcf7-form-control {
    margin-top: 5px;
    font-weight: 400;
}
/* 讓提交按鈕置中顯示 */
.wpcf7-form {
  position: relative; /* 使容器成為定位上下文 */
}

.wpcf7-form .submit-wrapper {
  text-align: center; /* 使包含提交按鈕的容器內容置中 */
}

.wpcf7-form input[type="submit"] {
  display: inline-block; /* 確保按鈕在其容器內顯示為行內塊元素 */
}

/* 專門針對 Contact Form 7 的輸入框文字顏色設置 */
.wpcf7-form-control.wpcf7-text {
  color: #000000; /* 黑色文字 */
}
/* 確保對必填輸入框生效 */
.wpcf7-form-control.wpcf7-text:focus {
  color: #000000; /* 黑色文字 */
}
/* 為其他輸入框類型統一設置（如電話、郵箱） */
.wpcf7-form-control {
  color: #000000; /* 黑色文字 */
}
/* 避免樣式被覆蓋，添加更高優先級 */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-text:focus {
  color: #000000 !important;
}
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required {
  color: #8F8F8F !important; /* 維持下拉選單的文字顏色 */
}
/* 確保針對 Contact Form 7 的 textarea 元素設置文字顏色 */
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-textarea:focus {
  color: #000000 !important; /* 黑色文字 */
}

/* 針對 textarea 元素的占位符顏色設定（例如 '請輸入內容'） */
.wpcf7-form-control.wpcf7-textarea::placeholder {
  color: #8F8F8F; /* 輸入框的占位符文字顏色 */
}


/*頁腳修改*/
.site-footer .site-info {
    position: relative;
    text-align: center;
    padding: 5px 0px;
    background: #403d3d;
    font-weight: 500;
    color: #bbbbbb;
}

/* 認證診所表格樣式 */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable {
    border: none !important; /* 移除表格外框 */
    border-collapse: collapse !important; /* 合并边框 */
   border: 30px solid #FFFFFF !important; /* 设置表格外框为白色 */
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable td,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th {
    border-left: none !important; /* 移除单元格的左侧线条 */
    border-right: none !important; /* 移除单元格的右侧线条 */
    border-bottom: 1px solid #ddd !important; /* 保留单元格的下边框（横线） */
}

/*標單距離*/
@media only screen and (max-width: 768px) {
  .form-col {
    height: 100px;
  }
}

/*表格背景色塊*/
/* 修改表格类为 wptb-preview-table wptb-element-main-table_setting-937 的标题行第二个单元格背景色 */
.wptb-element-main-table_setting-937 tr:first-child td:nth-child(2) {
    background-color: #405260;
}
/* 修改表格类为 wptb-preview-table wptb-element-main-table_setting-937 的所有行的第二列背景色 */
.wptb-element-main-table_setting-937 tr td:nth-child(2) {
    background-color: #d5e0e5;
}
/* 第二格标题背景色 */
.wptb-element-main-table_setting-441 .wptb-row:first-child .wptb-cell:nth-child(2) {
    background-color: #405260 !important;
    color: #ffffff !important;
}

/* 整个第二列的背景色 */
.wptb-element-main-table_setting-441 .wptb-cell:nth-child(2) {
    background-color: #d5e0e5 !important;
}


/*表格圓點樣式*/
.wptb-table-container .circle-container {
    text-align: center; /* 讓容器內的圓點在容器中置中 */
}

.wptb-table-container .circle {
    width: 18px;
    height: 18px;
    background-color: #403d3c; /* 可以改變為你想要的顏色 */
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px; /* 讓圓點之間有 4px 的間距 */
}

.wptb-table-container td {
    text-align: center; /* 使表格內容在單元格內水平置中 */
    vertical-align: middle; /* 垂直置中 */
}