/* 2026-11-09 全站基础控件统一(站长看过 Uiverse 后选的方向:L1 圆环加载 / T1 开关 / C1 勾选框 / R1 单选 / P2 提示气泡)。
   参考 Uiverse(uiverse.io,MIT)上 Abrar-Hussain1、ICe1BotMaker、elijahgummer、cbolson、SouravBandyopadhyay 的作品思路,按本站主色与「浅底、无描边」规矩重写。
   只是样式层:不改任何页面结构;回退 = 去掉 layouts/app.blade.php 里引这份文件和 hk-tip.js 的两行。 */

/* ---------- L1 加载圈:所有「字体图标 + 旋转」的加载圈换成细圆环(跟随文字颜色和字号) ----------
   二批(11-09)补:刷新箭头转圈(fa-sync-alt / la-sync 等,刷新按钮加载时变圆环、停下恢复箭头)、
   用自家类名转的 la-spinner(.is-spin / 收藏按钮)、Bootstrap 的 spinner-border。 */
.fa-spinner.fa-spin, .la-spinner.la-spin, .la-spinner.fa-spin, .fa-spinner.la-spin, .fa-circle-notch.fa-spin, .la-circle-notch.la-spin, .la-circle-notch.fa-spin, .fa-sync.fa-spin.is-loader, .la-spinner.is-spin, .fa-spinner.is-spin, .pd-chip .la-spinner, .fa-sync-alt.fa-spin, .la-sync-alt.la-spin, .la-sync.la-spin, .fa-sync.fa-spin, .la-sync.is-spin, .la-sync-alt.is-spin, .fa-rotate.fa-spin, .fa-arrows-rotate.fa-spin, .la-redo-alt.la-spin {
  display: inline-block; width: 1em; height: 1em; box-sizing: border-box; vertical-align: -0.125em;
  border: max(2px, 0.14em) solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; border-radius: 50%;
  animation: hkRing .7s linear infinite !important; font-size: inherit; line-height: 1;
}
.fa-spinner.fa-spin::before, .la-spinner.la-spin::before, .la-spinner.fa-spin::before, .fa-spinner.la-spin::before, .fa-circle-notch.fa-spin::before, .la-circle-notch.la-spin::before, .la-circle-notch.fa-spin::before, .fa-sync.fa-spin.is-loader::before, .la-spinner.is-spin::before, .fa-spinner.is-spin::before, .pd-chip .la-spinner::before, .fa-sync-alt.fa-spin::before, .la-sync-alt.la-spin::before, .la-sync.la-spin::before, .fa-sync.fa-spin::before, .la-sync.is-spin::before, .la-sync-alt.is-spin::before, .fa-rotate.fa-spin::before, .fa-arrows-rotate.fa-spin::before, .la-redo-alt.la-spin::before { content: "" !important; display: none; }
@keyframes hkRing { to { transform: rotate(360deg); } }
/* Bootstrap spinner-border:原本是粗环缺一角,改成同一种细圆环(尺寸仍按各页自己的) */
.spinner-border { --bs-spinner-border-width: 3px; --bs-spinner-animation-speed: .7s; border: var(--bs-spinner-border-width) solid color-mix(in srgb, currentColor 22%, transparent); border-top-color: currentColor; }
.spinner-border-sm { --bs-spinner-border-width: 2px; }

/* ---------- C1 勾选框 / R1 单选:浅底圆角块,选中主色底 + 白勾 / 白点 ----------
   分两层:
   ① 尺寸 / 外边距 —— :where() 0 优先级,页面自己写的 16px、margin 之类照旧生效;
   ② 画法(去原生外观、无边框、无内边距、底色、勾)—— 高优先级钉住。原因:很多页面有「.表单 input{边框;内边距;底色}」这种规则,
      原生勾选框不吃这些,自绘之后会被套上边框 / 撑宽 / 选中后底色被盖成白色看不见勾(11-09 二批,卖家建组弹窗的勾选列表就是这样)。
   页面把 input 藏起来另画外观的(opacity:0 / display:none)不受影响;要保留浏览器原生外观的加类 hk-native。 */
:where(input[type="checkbox"]:not(.hk-native):not([role="switch"]):not(.hk-switch):not(.btn-check)),
:where(input[type="radio"]:not(.hk-native):not(.btn-check)) {
  flex: none; width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; cursor: pointer; outline: 0;
  transition: background-color .15s, box-shadow .15s, transform .1s;
}
input[type="checkbox"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input),
input[type="radio"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input) {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; padding: 0; border: 0;
  background-color: color-mix(in srgb, var(--t-text, #0f172a) 12%, var(--t-surface, #fff));
  background-image: none; background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
}
input[type="checkbox"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input) { border-radius: 6px; }
input[type="radio"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input) { border-radius: 50%; }
input[type="checkbox"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input):hover,
input[type="radio"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input):hover { background-color: color-mix(in srgb, var(--t-text, #0f172a) 18%, var(--t-surface, #fff)); }
:where(input[type="checkbox"]:not(.hk-native):not([role="switch"]):not(.hk-switch):not(.btn-check)):active,
:where(input[type="radio"]:not(.hk-native):not(.btn-check)):active { transform: scale(.92); }
input[type="checkbox"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input):checked { background-color: var(--t-primary, #006fff); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4.5 10.5l3.6 3.6 7.4-8'/%3E%3C/svg%3E"); }
input[type="checkbox"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input):indeterminate { background-color: var(--t-primary, #006fff); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23fff' stroke-width='2.6' stroke-linecap='round' d='M5 10h10'/%3E%3C/svg%3E"); }
input[type="radio"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input):checked { background-color: var(--t-primary, #006fff); background-image: radial-gradient(circle, #fff 0 3.5px, transparent 4px); background-size: 100% 100%; }
input[type="checkbox"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input):focus-visible,
input[type="radio"]:not(.hk-native):not(.btn-check):not(.hk-switch):not([role="switch"]):not(.form-check-input):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-primary, #006fff) 28%, transparent); }
:where(input[type="checkbox"]:not(.hk-native)):disabled, :where(input[type="radio"]:not(.hk-native)):disabled { opacity: .5; cursor: not-allowed; }
/* Bootstrap .form-check-input(自带 1px 描边 + 蓝底图标):单独盖成同一套 */
.form-check-input[type="checkbox"]:not([role="switch"]), .form-check-input[type="radio"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: 0; border: 0 !important; box-shadow: none; background-color: color-mix(in srgb, var(--t-text, #0f172a) 12%, var(--t-surface, #fff)); background-size: 12px 12px; background-position: center; background-repeat: no-repeat; cursor: pointer; }
.form-check-input[type="checkbox"]:not([role="switch"]) { border-radius: 6px; }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input[type="checkbox"]:not([role="switch"]):checked { background-color: var(--t-primary, #006fff) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4.5 10.5l3.6 3.6 7.4-8'/%3E%3C/svg%3E") !important; }
.form-check-input[type="radio"]:checked { background-color: var(--t-primary, #006fff) !important; background-image: radial-gradient(circle, #fff 0 3.5px, transparent 4px) !important; background-size: 100% 100%; }
.form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-primary, #006fff) 28%, transparent) !important; }
.form-check:not(.form-switch) { display: flex; align-items: center; gap: 8px; padding-left: 0; }
.form-check:not(.form-switch) .form-check-input { float: none; margin-left: 0; }
/* 被页面自己藏起来、用别的元素画外观的(自写开关 / 卡片式单选):保持隐藏,不抢样式 */
input[type="checkbox"][hidden], input[type="radio"][hidden],
.ss-switch input, .visually-hidden[type="checkbox"], .visually-hidden[type="radio"], .d-none[type="checkbox"], .d-none[type="radio"] { width: 0; height: 0; margin: 0; background: none; }

/* ---------- T1 开关:Bootstrap 的 form-switch 和 role=switch ---------- */
.form-switch .form-check-input, input[type="checkbox"][role="switch"], input[type="checkbox"].hk-switch {
  -webkit-appearance: none; appearance: none; flex: none; box-sizing: border-box; cursor: pointer;
  width: 40px !important; height: 22px !important; margin: 0 8px 0 0; border: 0 !important; border-radius: 22px !important; vertical-align: -5px;
  background: color-mix(in srgb, var(--t-text, #0f172a) 18%, var(--t-surface, #fff)) !important; background-image: none !important;
  position: relative; transition: background-color .2s; box-shadow: none !important; float: none;
}
.form-switch .form-check-input::after, input[type="checkbox"][role="switch"]::after, input[type="checkbox"].hk-switch::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .22s cubic-bezier(.3, 1.3, .4, 1);
}
.form-switch .form-check-input:checked, input[type="checkbox"][role="switch"]:checked, input[type="checkbox"].hk-switch:checked { background: var(--t-primary, #006fff) !important; }
.form-switch .form-check-input:checked::after, input[type="checkbox"][role="switch"]:checked::after, input[type="checkbox"].hk-switch:checked::after { transform: translateX(18px); }
.form-switch { padding-left: 0 !important; display: inline-flex; align-items: center; }

/* ---------- P2 提示气泡(hk-tip.js 把 title 换成它;只在有鼠标的设备上) ---------- */
.hk-tip { position: fixed; z-index: 2147483000; max-width: 280px; padding: 6px 10px; border-radius: 8px; pointer-events: none;
  background: #1f2430; color: #fff; font-size: 12.5px; line-height: 1.45; font-weight: 500; white-space: pre-line; word-break: break-word;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.hk-tip.on { opacity: 1; transform: translateY(0); }
html[data-theme="dark"] .hk-tip { background: #f1f5f9; color: #0f172a; }

/* 二批(11-09):站内另外两种自带气泡对齐成同一个样子 —— 商品卡片上的发货方式 / 售后时间气泡(.delivery-tooltip,手机点一下也出)、Bootstrap tooltip */
body .delivery-tooltip { max-width: 280px; padding: 6px 10px; border-radius: 8px; background: #1f2430; color: #fff; font-size: 12.5px; line-height: 1.45; font-weight: 500; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
body .delivery-tooltip::before { display: none; }
html[data-theme="dark"] body .delivery-tooltip { background: #f1f5f9; color: #0f172a; }
.tooltip { --bs-tooltip-bg: #1f2430; --bs-tooltip-color: #fff; --bs-tooltip-border-radius: 8px; --bs-tooltip-font-size: 12.5px; --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 6px; --bs-tooltip-opacity: 1; --bs-tooltip-max-width: 280px; font-weight: 500; }
.tooltip .tooltip-arrow { display: none; }
.tooltip .tooltip-inner { box-shadow: 0 6px 20px rgba(0, 0, 0, .22); line-height: 1.45; }
html[data-theme="dark"] .tooltip .tooltip-inner { background-color: #f1f5f9; color: #0f172a; }

@media (prefers-reduced-motion: reduce) {
  .fa-spinner.fa-spin, .la-spinner.la-spin, .la-spinner.fa-spin, .fa-circle-notch.fa-spin, .fa-sync-alt.fa-spin, .la-sync-alt.la-spin, .la-sync.la-spin, .la-spinner.is-spin { animation-duration: 1.6s !important; }
  .spinner-border { --bs-spinner-animation-speed: 1.6s; }
  .hk-tip, input[type="checkbox"], input[type="radio"] { transition: none !important; }
}