/**
 * Form Icons Alignment Fix
 * 修复表单图标错位问题
 * 
 * @author XGX Games
 * @copyright XGX Games
 * @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 */

/* 基础图标容器样式 */
.input-with-icon,
.country-select {
  position: relative;
  display: block;
}

/* 图标基础样式 */
.input-with-icon .icon,
.country-select .icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  z-index: 10;
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro', 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* 输入框样式调整 */
.input-with-icon .form-control,
.country-select .form-control,
.country-select select {
  padding-left: 45px !important;
  width: 100%;
  height: 48px;
  background-color: #172027;
  border: 1px solid #433D47;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  line-height: 1.5;
}

/* 文本域图标特殊处理 */
.textarea-icon .icon {
  top: 12px;
  transform: none;
  align-items: flex-start;
}

/* 下拉菜单样式 */
.country-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: none;
}

/* 下拉箭头 */
.select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  pointer-events: none;
  font-size: 12px;
  z-index: 2;
}

/* 焦点状态 */
.input-with-icon .form-control:focus,
.country-select .form-control:focus,
.country-select select:focus {
  border-color: #8a5cf7 !important;
  box-shadow: 0 0 0 0.2rem rgba(138, 92, 247, 0.25) !important;
  outline: none;
}

/* 验证状态 */
.input-with-icon .form-control.is-invalid,
.country-select .form-control.is-invalid,
.country-select select.is-invalid {
  border-color: #dc3545 !important;
  background-color: rgba(220, 53, 69, 0.1) !important;
}

.input-with-icon .form-control.is-valid,
.country-select .form-control.is-valid,
.country-select select.is-valid {
  border-color: #28a745 !important;
  background-color: rgba(40, 167, 69, 0.1) !important;
}

/* 占位符样式 */
.input-with-icon .form-control::placeholder,
.country-select .form-control::placeholder,
.country-select select::placeholder {
  color: #888;
  opacity: 1;
}

/* 下拉选项样式 */
select option {
  background-color: #2d2d2d;
  color: #fff;
  padding: 10px;
}

/* 响应式调整 */
@media (max-width: 767px) {
  .input-with-icon .icon,
  .country-select .icon {
    font-size: 14px;
    left: 12px;
  }
  
  .input-with-icon .form-control,
  .country-select .form-control,
  .country-select select {
    padding-left: 40px !important;
    height: 44px;
    font-size: 14px;
  }
  
  .select-arrow {
    right: 12px;
    font-size: 10px;
  }
}

/* 确保图标在输入框上方 */
.input-with-icon .icon,
.country-select .icon {
  z-index: 10;
}

/* 确保图标容器有足够的空间 */
.input-with-icon,
.country-select {
  min-height: 48px;
}

/* 确保输入框和图标在同一行 */
.input-with-icon .form-control,
.country-select .form-control,
.country-select select {
  position: relative;
  z-index: 1;
}

/* 修复多语言环境下的图标对齐 */
[dir="rtl"] .input-with-icon .icon,
[dir="rtl"] .country-select .icon {
  left: auto;
  right: 15px;
}

[dir="rtl"] .input-with-icon .form-control,
[dir="rtl"] .country-select .form-control,
[dir="rtl"] .country-select select {
  padding-left: 15px !important;
  padding-right: 45px !important;
}

[dir="rtl"] .select-arrow {
  right: auto;
  left: 15px;
}

/* 确保所有表单控件都有正确的样式 */
.form-control {
  background-color: #172027;
  border: 1px solid #433D47;
  color: #fff;
  border-radius: 5px;
  width: 100%;
  font-size: 16px;
  height: auto;
}

/* 文本域特殊样式 */
textarea.form-control {
  min-height: 120px;
  resize: vertical;
  padding-top: 12px;
}

/* 下拉菜单高度统一 */
select.form-control:not([size]):not([multiple]) {
  height: 48px !important;
}