/* ==========================================================================
 * Falixer 前台统一视觉层（globalCSS）
 * --------------------------------------------------------------------------
 * 加载位置：web / cart / clientarea 三套主题各自在 head 末尾引入本文件。
 * 只改视觉（颜色 / 圆角 / 阴影 / 字体 / 边框），不改布局、不改 DOM、不动 JS。
 * 设计令牌与后台 mbadmin 的 skin.css 保持一致，避免前后台割裂。
 * ========================================================================== */

:root {
  /* 主色：后台 --fskin-primary */
  --fx-primary: #3f5bd8;
  --fx-primary-dark: #3550c9;
  --fx-primary-soft: rgba(63, 91, 216, 0.09);

  /* 文字：后台 --fskin-text / --fskin-text-sub */
  --fx-text: #1f2430;
  --fx-text-sub: #6b7280;

  /* 线与底 */
  --fx-hairline: #e6e8ee;
  --fx-bg-soft: #f6f7f9;

  /* 圆角：后台 --fskin-radius / -sm / -xs */
  --fx-r-lg: 16px;
  --fx-r: 10px;
  --fx-r-sm: 8px;

  /* 阴影：后台 --fskin-shadow / --fskin-shadow-sm */
  --fx-shadow: 0 10px 34px rgba(24, 34, 58, 0.10);
  --fx-shadow-sm: 0 4px 16px rgba(24, 34, 58, 0.07);
}

/* ------------------------------------------------------------------ 基础 */
body {
  color: var(--fx-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  transition: color 0.18s ease;
}
a:hover {
  color: var(--fx-primary-dark);
}

/* ------------------------------------------------------------------ 按钮 */
.btn,
button.btn,
input[type="submit"],
input[type="button"],
.el-button {
  border-radius: var(--fx-r) !important;
  font-weight: 500;
  transition: background-color 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--fx-primary) !important;
  background-image: none !important;
  border-color: var(--fx-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--fx-primary-dark) !important;
  border-color: var(--fx-primary-dark) !important;
  box-shadow: 0 6px 18px rgba(63, 91, 216, 0.28);
}

.btn-outline-primary {
  color: var(--fx-primary) !important;
  border-color: var(--fx-primary) !important;
  border-radius: var(--fx-r) !important;
}
.btn-outline-primary:hover {
  background: var(--fx-primary) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------ 表单 */
.form-control,
.custom-select,
.el-input__inner,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
  border-radius: var(--fx-r) !important;
  border: 1px solid var(--fx-hairline);
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus,
.custom-select:focus,
.el-input__inner:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fx-primary) !important;
  box-shadow: 0 0 0 3px var(--fx-primary-soft) !important;
}

/* 客户中心模板用 `body.inherit .form-control{border-radius:1px!important}`
   压过 bootstrap，这里用更高特异性把圆角拿回来（0,2,2 / 0,3,2）。 */
html body .form-control,
html body input.form-control,
html body .L_code-login-form .form-control,
html body .L_code-right-side .form-control {
  border-radius: var(--fx-r) !important;
  border-color: var(--fx-hairline) !important;
  box-shadow: none !important;
}

.input-group-text {
  border-radius: var(--fx-r) 0 0 var(--fx-r) !important;
  border-color: var(--fx-hairline);
  background: var(--fx-bg-soft);
}

/* -------------------------------------------------------------- 卡片/弹层 */
.card,
.panel,
.modal-content,
.dropdown-menu {
  border-radius: var(--fx-r-lg) !important;
  border-color: var(--fx-hairline) !important;
  box-shadow: var(--fx-shadow-sm);
}

.modal-content {
  box-shadow: var(--fx-shadow);
}

.card-header,
.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--fx-hairline) !important;
  border-radius: var(--fx-r-lg) var(--fx-r-lg) 0 0 !important;
  font-weight: 600;
}

/* ------------------------------------------------------------------ 表格 */
.table thead th {
  background: var(--fx-bg-soft);
  border-bottom: 1px solid var(--fx-hairline);
  color: var(--fx-text-sub);
  font-weight: 600;
}
.table td,
.table th {
  border-color: var(--fx-hairline);
}

/* ------------------------------------------------------------------ 分页 */
.pagination .page-link {
  border-radius: var(--fx-r-sm) !important;
  margin: 0 2px;
  border-color: var(--fx-hairline);
}
.pagination .page-item.active .page-link {
  background: var(--fx-primary);
  border-color: var(--fx-primary);
}

/* ------------------------------------------------------------------ 其它 */
.badge {
  border-radius: 999px !important;
  font-weight: 500;
}
.alert {
  border-radius: var(--fx-r) !important;
  border-color: var(--fx-hairline);
}

/* 桌面端细滚动条（与后台一致） */
@media (min-width: 993px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.18);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 24, 39, 0.28);
    background-clip: content-box;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}