/* 客户下单页：背景图 + 全透明玻璃
 * 背景直接挂在 html 上（最底层，任何容器都盖不住）；
 * 客户页的白色容器全部改成半透明玻璃。
 * 后台管理页有自己更靠前的背景规则，不受影响。
 */

/* ---------- 背景：直接贴在最底层 ---------- */
html {
  background-color: #dfeef2 !important;
  background-image: url("/site-bg.webp") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body {
  background: transparent !important;
}

/* iOS 上 fixed 背景会跟着滚动，这里用 body 的固定伪元素补齐 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("/site-bg.webp") center center / cover no-repeat #dfeef2;
  pointer-events: none;
}

/* 压暗层：背景是浅色图，不压一层白卡片上的字会看不清 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(9, 26, 36, 0.30), rgba(9, 26, 36, 0.48));
  pointer-events: none;
}

/* 客户页外壳透明，让底层背景透上来 */
.customer-shell {
  background: transparent !important;
}

/* ---------- 所有白色容器 → 玻璃 ---------- */
.customer-shell .customer-panel,
.customer-shell .customer-order-main,
.customer-shell .customer-order-aside,
.customer-shell .customer-order-history-card,
.customer-shell .customer-load-card,
.customer-shell .customer-order-summary,
.customer-shell .customer-order-tips,
.customer-shell .customer-payment-assurance,
.customer-shell .customer-security-note,
.customer-shell .customer-block {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 22px 60px -30px rgba(4, 18, 28, 0.55);
}

.customer-shell .customer-panel,
.customer-shell .customer-order-main {
  box-shadow:
    0 28px 70px -30px rgba(4, 18, 28, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- 类目 tab / 项目选项 ---------- */
.customer-shell .customer-category-tab,
.customer-shell .customer-project-option {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #0b2230 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.customer-shell .customer-category-tab:hover,
.customer-shell .customer-project-option:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: #fb923c !important;
}

.customer-shell .customer-category-tab.active,
.customer-shell .customer-project-option.active {
  background: rgba(249, 115, 22, 0.22) !important;
  border-color: #f97316 !important;
  color: #b03a00 !important;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.45);
}

.customer-shell .customer-category-tab small {
  background: rgba(255, 255, 255, 0.42) !important;
  color: #0b2230 !important;
}

/* ---------- 顶部上号方式（Element 单选按钮） ---------- */
.customer-shell .el-radio-button__inner {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #0b2230 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: none !important;
}

.customer-shell .el-radio-button.is-active .el-radio-button__inner {
  background: rgba(249, 115, 22, 0.82) !important;
  border-color: #f97316 !important;
  color: #fff !important;
}

/* ---------- 序号徽标 ---------- */
.customer-shell .block-index {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #b03a00 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- 输入框 ---------- */
.customer-shell .el-input__wrapper,
.customer-shell .el-textarea__inner,
.customer-shell .el-select__wrapper {
  background: rgba(255, 255, 255, 0.26) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- 按钮 ---------- */
.customer-shell .el-button:not(.el-button--primary):not(.is-text) {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
  color: #0b2230 !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.customer-shell .el-button:not(.el-button--primary):hover {
  background: rgba(255, 255, 255, 0.32) !important;
}

.customer-shell .el-button--primary {
  background: rgba(0, 119, 194, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    0 14px 34px -16px rgba(0, 119, 194, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ---------- 分隔线 ---------- */
.customer-shell .customer-header,
.customer-shell .customer-order-main > .customer-block {
  border-color: rgba(255, 255, 255, 0.24) !important;
}

/* ---------- 小屏 ---------- */
@media (max-width: 640px) {
  .customer-shell {
    padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    min-height: 100svh;
  }
  .customer-shell .customer-panel,
  .customer-shell .customer-order-main {
    padding: 14px 12px;
    border-radius: 16px;
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
  }
}