/* ============================================================
   询价表单 · 国家/地区代码下拉框（#phoneCode）修复
   ------------------------------------------------------------
   症状：contact 页「Mobile/WhatsApp」行左侧的代码选择框
        ① 变成胶囊形（圆角 30px），与右侧输入框的拼接关系断掉；
        ② 按钮内的「Code」文字下半截被裁掉。

   根因：
   ① v5.css 第 10 节的统一按钮规则
        body .btn { border-radius: var(--nr-btn-radius) !important;
                    padding: var(--nr-btn-pad-y) var(--nr-btn-pad-x) !important; }
      把模板原本「左圆角、右直角、与右边 input 拼接成一体」的
      .phone-wrap .bootstrap-select > .dropdown-toggle 一起套成了 30px 胶囊，
      而 padding 10px 上下又把它撑到 36px 之外。
   ② bootstrap-select 的 .filter-option 是
        height:100%; overflow:hidden;
      按钮 36px − padding 上下 20px − border 2px = 内容盒只剩 14px，
      而里面的文字行高是 16px × 1.4 = 22.4px → 下半截被 overflow 裁掉。

   修法：
   ① 恢复模板本来的拼接式圆角（左圆右直 / RTL 反向），并把 padding 归零，
      改用 flex 居中，避免 14px 内容盒的问题；
   ② .filter-option 改为 height:auto + overflow:visible，
      让文字按实际行高完整渲染，不再被裁。

   适用范围：四个 custom_inquiry_form_* 版本共用同一套类名结构，
   故用属性无关的通用选择器 + .phone-wrap 限定，不绑版本号。
   ============================================================ */

/* ---------- ① 拼接式圆角 + 垂直居中 ---------- */
.phone-wrap .bootstrap-select > .dropdown-toggle {
  border-radius: 5px 0 0 5px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  line-height: normal !important;
}

html[dir="rtl"] .phone-wrap .bootstrap-select > .dropdown-toggle {
  border-radius: 0 5px 5px 0 !important;
}

/* ---------- ② 文字不再被裁 ---------- */
.phone-wrap .bootstrap-select .dropdown-toggle .filter-option,
.phone-wrap .bootstrap-select .dropdown-toggle .filter-option-inner,
.phone-wrap .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  height: auto !important;
  overflow: visible !important;
  line-height: 22px !important;
}

/* 箭头（caret）跟随按钮居中，避免与文字错位 */
.phone-wrap .bootstrap-select .dropdown-toggle .caret {
  top: 50% !important;
  margin-top: -2px !important;
}