/* ==========================================================
   强制覆盖方案：彻底重置 intl-tel-input 的布局
   ========================================================== */

/* 1. 确保容器宽度正常，并保持相对定位，这是插件的根基 */
.iti {
  display: block !important;
  width: 100% !important;
  position: relative !important; /* 必须是相对定位 */
  box-sizing: border-box !important;
}

/* 2. 强制固定国旗容器 (Flag Container) 的位置和宽度 */
/* 只要固定了它，后续的 input 填充空间就能算准 */
.iti__flag-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 52px !important; /* 这里固定宽度，给国旗留出空间 */
  z-index: 10 !important; /* 确保国旗在输入框上方 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3. 强制输入框左侧留出足够的 Padding */
/* 这里的数值必须大于上面容器的宽度 (52px)，比如设为 60px */
/* 这样输入的内容才不会覆盖国旗，光标也会正常出现在国旗后面 */
.iti input,
.iti input[type=tel] {
  padding-left: 60px !important;
  padding-right: 12px !important;
  width: 100% !important;
  height: 40px !important; /* 保持与你表单高度一致 */
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
}

/* 4. 彻底解决光标/位置错乱 */
/* 移除任何可能导致的 text-indent 或多余 margin */
.iti input {
  text-indent: 0 !important;
  background-clip: padding-box !important;
}
/* 国际手机号码样式修正----------------------------*/

/* ==========================================
   ITRA Query 交互组件样式
   ========================================== */

/* ==========================================
   ITRA Query 布局修复 (Fix for Mobile/PC)
   ========================================== */

.itra-query-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center; /* 关键：垂直居中对齐 */
  justify-content: flex-start;
  gap: 8px; /* 输入框与按钮间距 */
  width: 100%;
  box-sizing: border-box;
}

/* 输入框：强制统一高度 */
.itra-query-wrapper input[data-drupal-selector="edit-itra-id"] {
  flex: 1; /* 占据剩余空间 */
  height: 40px; /* 统一高度 */
  margin: 0 !important;
  box-sizing: border-box;
}

/* 直接在 CSS 中预设容器样式，不要在 JS 里去 wrap */
.itra-query-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 调整后的按钮样式 */
#itra-query-btn {
  flex: 0 0 auto;
  height: 40px;
  /* 将 padding 从 16px 减小为 8px，缩窄按钮两侧空间 */
  padding: 0 8px;
  white-space: nowrap;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  /* 适当调小字体，有助于在英文单词较长时更紧凑 */
  font-size: 13px;
  cursor: pointer;
  line-height: 40px;
  /* 将最小宽度从 80px 调小，允许其根据内容自动收缩 */
  min-width: 60px;
  margin: 0 !important;
}

#itra-query-btn:hover {
  background-color: #0056b3;
}

#itra-query-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}

/* 2. 结果展示容器 */
.pi-result-box {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  background-color: #fcfcfc;
  border-radius: 6px;
  color: #333333;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.pi-result-box strong {
  display: block;
  margin-bottom: 5px;
  color: #000;
}

/* 3. 移动端自适应适配 */
@media (max-width: 600px) {
  /* 修改点：保留横向排列，不改为垂直 */
  .itra-query-wrapper {
    flex-direction: row;
    gap: 5px; /* 屏幕小，减小一点间距 */
  }

  /* 修改点：恢复 flex: 1，移除强制占满宽度的设置 */
  .itra-query-wrapper input[data-drupal-selector="edit-itra-id"] {
    width: auto;
    min-width: 80px; /* 允许输入框在极窄屏幕下适当缩短，但仍保持在左侧 */
    margin-bottom: 0;
  }

  /* 修改点：移除按钮全宽设置，让其保持在右侧 */
  #itra-query-btn {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0 10px; /* 屏幕小，左右内边距适当缩小 */
    font-size: 13px; /* 字体稍微调小一点防止按钮过大 */
  }

  .pi-result-box {
    margin-top: 10px;
    padding: 12px;
  }
}

/* 4. 模态框优化 */
/* 修复 jQuery UI Dialog 标题栏与内容区宽度不一致的问题 */
/* 容器响应式宽度（保留这一段） */
.ui-dialog {
  max-width: 800px !important;
  width: 90% !important;
  box-sizing: border-box !important; /* 关键：确保 padding 不会撑大容器 */
}

/* 标题栏与内容区宽度统一 */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-content {
  box-sizing: border-box !important;
  width: 100% !important;
}
/* 修复 jQuery UI Dialog 标题栏与内容区宽度不一致的问题 */

/* 强力重置关闭按钮：优化尺寸与对齐 */
.ui-dialog .ui-dialog-titlebar-close {
  display: flex !important;
  align-items: center;
  justify-content: center;

  /* 增大按钮尺寸，方便触控 */
  width: 32px !important;
  height: 32px !important;

  position: absolute;
  top: 50% !important;
  /* 使用 transform 替代 margin-top，垂直居中更稳健 */
  transform: translateY(-50%);
  right: 10px !important;

  /* 视觉外观 */
  background: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-radius: 6px !important; /* 略微圆角看起来更现代 */
  padding: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease; /* 添加过渡动画 */

  /* 字体优化 */
  color: #666 !important;
  font-size: 20px !important; /* 增大 X 的字号 */
  font-weight: 400 !important;
  font-family: Arial, sans-serif !important;
  line-height: 1 !important;
  margin: 0 !important; /* 清除默认 margin 干扰 */
}

/* 强制使用 Unicode 字符，确保在所有浏览器渲染一致 */
.ui-dialog .ui-dialog-titlebar-close::after {
  content: "\00d7";
}

/* 悬停时的交互效果 */
.ui-dialog .ui-dialog-titlebar-close:hover {
  background: #e9ecef !important;
  border-color: #adb5bd !important;
  color: #333 !important;
  transform: translateY(-50%) scale(1.05); /* 悬停时微缩放，增加交互反馈 */
}

/* 点击时的反馈 */
.ui-dialog .ui-dialog-titlebar-close:active {
  transform: translateY(-50%) scale(0.95);
}

/* 隐藏 jQuery UI 原生图标 */
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  display: none !important;
}

/* 列表项高亮 */
.itra-modal-item {
  padding: 12px !important;
  border-bottom: 1px solid #eee !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.itra-modal-item:hover {
  background-color: #e6f7ff;
  color: #004a99;
}

/* 针对所有被禁用的 Chosen 下拉框 */
.chosen-container.chosen-disabled .chosen-single {
  background-color: #f8f9fa !important; /* 浅灰色背景 */
  border-color: #dee2e6 !important;     /* 浅色边框 */
  color: #6c757d !important;            /* 灰色字体 */
  cursor: not-allowed !important;       /* 鼠标悬停显示禁止符号 */
  opacity: 0.7;                         /* 略微降低透明度，增强视觉上的“置灰”感 */
}

/* 如果你希望给禁用状态增加一个明显的背景色，可以修改这里的 background-color */
/* 例如改为淡黄色背景：background-color: #fff3cd !important; */