/* ============================================================
   聯絡我們區塊樣式
   延續 .ctx-card / 最新消息卡片同一套設計語彙：
   白底卡片、細邊框(--color-line)、6px 圓角、陰影、主色系表單
   斷點依 Bootstrap3 標準：sm=768px
   ============================================================ */

/* ---------- 2. 外層排版 ---------- */
#main-container.container {
  font-family: var(--font-family);
  color: var(--color-ink);
  margin-bottom: 48px;
}

/* ---------- 3. 左側形象圖 ---------- */
.contact-img img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: var(--shadow-default);
}

/* ---------- 4. 表單卡片（比照 .ctx-card 卡片語彙） ---------- */
.panel.panel-smart {
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.panel-heading {
  border-bottom: 1px solid var(--color-line);
  padding: 18px 24px;
}
.panel-title2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-ink);
}
.panel-title2 .label.label-info {
  margin-right: 4px;
}

.panel-body {
  padding: 26px 24px;
}

/* ---------- 5. 表單欄位 ---------- */
.panel-body .form-group {
  margin-bottom: 18px;
}
.panel-body .control-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-muted);
  text-align: left;
  padding-top: 9px;
}

.panel-body .form-control {
  border: 1px solid var(--color-line);
  border-radius: var(--border-radius);
  box-shadow: none;
  font-size: 14px;
  color: var(--color-ink);
  padding: 9px 12px;
  height: auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.panel-body .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}
.panel-body textarea.form-control {
  resize: vertical;
}

/* ---------- 6. 驗證碼區 ---------- */
#eCode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--color-paper);
  border-radius: var(--border-radius);
}
#eCode .goodsnum {
  vertical-align: middle;
}
#eCode .goodsinput_2 {
  border-radius: var(--border-radius);
  padding: 5px 8px;
  font-size: 14px;
  width: 90px;
}
#getCodeA img {
  vertical-align: middle;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
#getCodeA img:hover {
  opacity: 1;
}

/* ---------- 7. 送出按鈕 ---------- */
.panel-body .btn.btn-info.btn-bg {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-text-light);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 32px;
  border-radius: var(--border-radius);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.panel-body .btn.btn-info.btn-bg:hover,
.panel-body .btn.btn-info.btn-bg:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.submit_btn > .col-sm-offset-2{
    display: flex;
    justify-content: end;
    align-items: center;
}

/* ---------- 8. RWD（<768px） ---------- */
@media (max-width: 767px) {
  .contact-title { font-size: 19px; margin: 24px 0 12px; }
  .contact-img img { min-height: 200px; }
  .panel-heading { padding: 14px 18px; }
  .panel-body { padding: 20px 18px; }
  .panel-body .control-label { text-align: left; padding-top: 0; margin-bottom: 4px; }
  .panel-body .btn.btn-info.btn-bg { width: 100%; }
}