/* ==========================================================================
   buttons.css — 全站控件视觉统一层（按钮 / 输入框 / 下拉 / 多行框）
   --------------------------------------------------------------------------
   为什么需要这一层
     全站有 636 条规则提到 button，但圆角几乎是清一色 4px、输入框内联写死
     `#dce3eb` 边框且不设背景（＝浏览器默认白底），于是深色主题下输入框像在
     黑色面板上「挖了两个白洞」，按钮则因为 4px 圆角看起来像 2010 年的表单。

   这一层只做四件事，全部基于主题变量，不写死任何颜色：
     1  圆角统一 4px → 8px（带排除表：圆形返回键、分段控件、底部导航、关闭键）
     2  输入框/下拉/多行框跟主题走（深色主题不再白洞）
     3  主 CTA 加"实体键"质感：内高光 + 单侧投影 + 按下内凹
     4  禁用态统一（半透明、无投影、无光标误导）

   不做什么：不动尺寸、内边距、字号、排列。这一层只改"材质"，不改"布局"，
   所以不会把任何页面挤歪。
   ========================================================================== */

:root {
  --btn-r: 8px;          /* 常规控件 */
  --btn-r-key: 10px;     /* 主 CTA / 关闭键 */
  --btn-lift: 0 8px 18px -8px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   1. 圆角统一
   排除：关闭键（自己有 6px + 金色边框的既定样式）、分段控件、底部导航、
        圆形返回键、以及任何 [data-shape="pill"] 的胶囊按钮。
   -------------------------------------------------------------------------- */
button:not(.modal-close):not(.seg button):not(.mobile-nav button):not(.qikswap-back-button):not([data-shape="pill"]),
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]) {
  border-radius: var(--btn-r);
}

.modal-close:not(.is-back) {
  border-radius: var(--btn-r-key);
}

/* --------------------------------------------------------------------------
   2. 表单控件跟主题走
   原来输入框只有边框颜色（内联 #dce3eb）、没有背景，深色主题下就是一块白。
   这里用主题自己的「面板色 + 文字色 + 描边色」三元组，天然满足对比度。
   -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
select,
textarea {
  color: var(--ink, #111b2a);
  border-color: var(--line, #dce3eb);
  background-color: var(--theme-surface, #fff);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--blue, #2357e8) 45%, var(--line, #dce3eb));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  border-color: var(--blue, #2357e8);
  /* 第一行是给不支持 color-mix 的旧 WebView 的兜底（中性色，不假设主色），第二行覆盖 */
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .14);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, #2357e8) 22%, transparent);
}

/* 占位符别太抢眼：它只是提示，不是内容 */
input::placeholder,
textarea::placeholder {
  color: var(--muted, #6f7c8d);
  opacity: .85;
}

/* --------------------------------------------------------------------------
   3. 主 CTA：从"色块"变成"实体键"
   只挑页面里真正的主操作按钮。列表里的图标按钮、标签页按钮一律不动——
   给它们加渐变和投影只会显得脏。
   -------------------------------------------------------------------------- */
.login-form > button:not(.login-tab):not(.auth-link-button),
.search button,
.primary-button,
.order-buttons .confirm,
.restock-form button[type="submit"],
.auth-email-code-row button,
.product-buy,
.mobile-buy {
  border-radius: var(--btn-r-key);
  border: 1px solid var(--blue-dark, var(--blue, #2357e8));
  color: var(--theme-accent-contrast, #fff);
  background-color: var(--blue, #2357e8);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), var(--btn-lift);
}

@media (hover: hover) and (pointer: fine) {
  .login-form > button:not(.login-tab):not(.auth-link-button):hover,
  .search button:hover,
  .primary-button:hover,
  .order-buttons .confirm:hover,
  .restock-form button[type="submit"]:hover,
  .auth-email-code-row button:hover,
  .product-buy:hover,
  .mobile-buy:hover {
    filter: brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -8px rgba(0, 0, 0, .55);
  }
}

/* 按下：投影收掉 + 内凹，手感上"真的被按进去" */
.login-form > button:not(.login-tab):not(.auth-link-button):active,
.search button:active,
.primary-button:active,
.order-buttons .confirm:active,
.restock-form button[type="submit"]:active,
.auth-email-code-row button:active,
.product-buy:active,
.mobile-buy:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28);
}

/* --------------------------------------------------------------------------
   4. 登录/注册 标签页：把 2px 硬线换成圆头指示条
   只做 .login-tab —— 站点里其它 "xxx-tabs button.active" 是**实心填充**标签
   （背景是主色块），套用下划线方案会把它们的激活态直接抹掉。
   用 background-image 画，不用伪元素——伪元素 + transform 在本项目实测过
   「静止态仍会绘制」的坑（见 motion.css 文件尾记录）。
   -------------------------------------------------------------------------- */
.login-tab {
  border-bottom: 0;
  background-image: linear-gradient(var(--blue, #2357e8), var(--blue, #2357e8));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  background-color: transparent;
  transition: background-size 180ms ease, color 180ms ease;
}

/* 未选中：不画指示条（background-size 0），悬停才短暂出现一小段 */
.login-tab[aria-selected="false"] {
  background-size: 0 2px;
}

@media (hover: hover) and (pointer: fine) {
  .login-tab[aria-selected="false"]:hover {
    background-size: 40% 2px;
  }
}

/* --------------------------------------------------------------------------
   5. 禁用状态统一
   禁用按钮最忌"看起来能点"：半透明 + 无投影 + 不显示悬停反馈。
   -------------------------------------------------------------------------- */
button:disabled,
button[aria-disabled="true"] {
  opacity: .5;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}

button:disabled:hover,
button[aria-disabled="true"]:hover {
  filter: none;
  box-shadow: none;
}