/**
 * amz-theme.css —— 全站统一皮肤层
 *
 * 目标：把仍在用 2016 版旧模板样式的页面（购物车/详情/搜索/订单/账户等）
 * 对齐到首页与商品列表已确立的亚马逊式视觉。
 *
 * 原则：只改「皮肤」——配色、圆角、边框、阴影、字体、状态态；
 * 不动旧页面的布局骨架（width / float / position 一律不碰），
 * 因此可安全地在各页原有 CSS 之后最后引入。
 *
 * 旧表大量使用 class 选择器且写死了颜色，故皮肤属性上用 !important 提权；
 * 仅限颜色/边框/圆角/阴影等视觉属性，不用于布局属性。
 */

:root {
  --amz-navy: #131921;
  --amz-navy-2: #232f3e;
  --amz-navy-3: #37475a;
  --amz-yellow: #febd69;
  --amz-yellow-h: #f3a847;
  --amz-btn: #ffd814;
  --amz-btn-h: #f7ca00;
  --amz-btn-2: #ffa41c;
  --amz-btn-2-h: #fa8900;
  --amz-bg: #eaeded;
  --amz-ink: #0f1111;
  --amz-ink-2: #565959;
  --amz-link: #007185;
  --amz-link-h: #c7511f;
  --amz-price: #b12704;
  --amz-line: #d5d9d9;
  --amz-radius: 8px;
  --amz-shadow: 0 2px 5px rgba(15, 17, 17, 0.15);
}

/* 旧表（orderConfirm.css 等）把 #header 写死成 width:1000px;height:40px，
   会把全宽的亚马逊头部挤成窄条并在两侧留白。头尾一律交还给组件自身。 */
#header, #footer {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* 旧页面大量使用 float(.lf/.rt) 却没有清除浮动，导致页脚被浮动元素压住
   （支付结果页最明显）。这里补 clearfix —— 属于修 bug，不改布局意图。 */
#container::after, .store_action::after, .big::after, #section::after {
  content: "";
  display: table;
  clear: both;
}

/* ---------------- 基础 ---------------- */
body {
  background-color: var(--amz-bg) !important;
  color: var(--amz-ink) !important;
  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Arial,
    sans-serif !important;
  font-size: 14px !important;
}
a {
  color: var(--amz-link);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--amz-link-h) !important;
}
/* 注意：不要波及 header/footer —— 它们已是深底白字的亚马逊式组件 */
h1, h2, h3, h4 {
  color: var(--amz-ink);
}
.amz-header, .amz-header *, #footer, #footer * {
  /* 头尾自带配色，皮肤层一律不干预 */
}

/* 表单控件统一为亚马逊式 */
input[type="text"], input[type="password"], input[type="tel"],
input[type="email"], input[type="number"], textarea, select {
  border: 1px solid #888c8c !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(15, 17, 17, 0.08) inset !important;
  color: var(--amz-ink) !important;
  outline: none;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus,
input[type="email"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
  border-color: #e77600 !important;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.5) !important;
}

/* 通用按钮：主行动=黄，次行动=橙，其余=白底细边 */
.amz-cta, .foot_cash, .go_pay, .okPay, .save_password, .btn_succ,
.cart, #add_cart, .sub_btn, .aco_change {
  background: var(--amz-btn) !important;
  background-image: none !important;
  border: 1px solid #fcd200 !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5) !important;
  cursor: pointer;
  transition: background 0.12s ease;
}
.amz-cta:hover, .foot_cash:hover, .go_pay:hover, .okPay:hover,
.save_password:hover, .btn_succ:hover, .cart:hover, #add_cart:hover {
  background: var(--amz-btn-h) !important;
  color: var(--amz-ink) !important;
}
.amz-cta-2, .buy, #buy_now {
  background: var(--amz-btn-2) !important;
  background-image: none !important;
  border: 1px solid #ff8f00 !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5) !important;
}
.amz-cta-2:hover, .buy:hover, #buy_now:hover {
  background: var(--amz-btn-2-h) !important;
  color: var(--amz-ink) !important;
}
/* 次要操作（返回购物车等）：白底细边，不与主 CTA 抢视线 */
.go_cart, .btn_fail, .aco_delete, .no {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--amz-line) !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5) !important;
}
.go_cart:hover, .btn_fail:hover, .aco_delete:hover, .no:hover {
  background: #f7fafa !important;
}

/* 价格一律亚马逊红 */
.price, .color, .foot_pices, .totalPrices, #pro_price span, .pay_leftTime span,
.susum, .susumOne {
  color: var(--amz-price) !important;
}
/* .price 是详情页右栏的整个容器，红色只应作用于价格数字本身；
   容器内的标签与服务承诺要还原成正文色，否则整块都变红。 */
.price b, #pro_price b, .promise, .promise b, .promise span,
.price .connect, .price .connect * {
  color: var(--amz-ink) !important;
}

/* ---------------- 白卡容器 ---------------- */
#section, #box, #content_box, .salc_top, .salc_content, .store_action,
.rightsidebar_box, #leftsidebar_box, .rs_content, .address_content,
.pay_info, .pay_result, .count_bar_info, .parameter, .promise,
.right_detail, .detail_1, #container > .lf, .my_order {
  background: #fff !important;
  border-radius: var(--amz-radius) !important;
}
#section, .salc_top, .salc_content, .rightsidebar_box, #leftsidebar_box,
.pay_info, .pay_result, .address_content {
  border: 1px solid var(--amz-line) !important;
  box-shadow: var(--amz-shadow) !important;
}

/* 区块标题 */
#title, .salc_top, .item_title, .address_title, .pay_type_title,
.change_password_title, .rs_header, .aim_title {
  background: #fff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--amz-line) !important;
  color: var(--amz-ink) !important;
  font-weight: 700 !important;
}
#title b, .salc_top .title {
  color: var(--amz-ink) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
}

/* 表头（购物车等） */
.imfor_top, .first_dd, .dzmc_title {
  background: #f7fafa !important;
  background-image: none !important;
  border-bottom: 1px solid var(--amz-line) !important;
  color: var(--amz-ink-2) !important;
  font-weight: 600 !important;
}
.foot {
  background: #f7fafa !important;
  background-image: none !important;
  border-top: 1px solid var(--amz-line) !important;
  border-radius: 0 0 var(--amz-radius) var(--amz-radius) !important;
}

/* ---------------- 商品详情页 ---------------- */
#pro_price {
  background: #f7fafa !important;
  background-image: none !important;
  border: 1px solid var(--amz-line) !important;
  border-radius: var(--amz-radius) !important;
}
#pro_price span {
  font-size: 28px !important;
  font-weight: 400 !important;
}
/* 规格（颜色/版本）选项 */
.spu_value {
  background: #fff !important;
  border: 1px solid var(--amz-line) !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.4) !important;
}
.spu_value:hover {
  border-color: #adb1b8 !important;
}
.spu_check, .spu_value.active {
  border-color: #e77600 !important;
  box-shadow: 0 0 3px 2px rgba(228, 121, 17, 0.35) !important;
  background: #fff7ec !important;
}
/* 数量步进器 */
.number, .numberAdd, .numberMinus {
  border: 1px solid var(--amz-line) !important;
  background: #f7fafa !important;
  color: var(--amz-ink) !important;
}
.numberMinus { border-radius: var(--amz-radius) 0 0 var(--amz-radius) !important; }
.numberAdd { border-radius: 0 var(--amz-radius) var(--amz-radius) 0 !important; }
.number { background: #fff !important; }
/* 详情 Tab */
.tab {
  border-bottom: 1px solid var(--amz-line) !important;
  background: transparent !important;
}
.tab .active, .tab li.active {
  color: var(--amz-link-h) !important;
  border-bottom: 3px solid var(--amz-yellow-h) !important;
  font-weight: 700 !important;
}
/* 右侧悬浮导航 */
.aside_nav, .aside_nav a {
  background: #fff !important;
  border: 1px solid var(--amz-line) !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
  box-shadow: var(--amz-shadow) !important;
}

/* ---------------- 搜索 / 列表 ---------------- */
.product, .addRemoveProduct {
  background: #fff !important;
  border: 1px solid transparent !important;
  border-radius: var(--amz-radius) !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.product:hover {
  box-shadow: var(--amz-shadow) !important;
  transform: translateY(-2px);
}
/* 分页 */
.pager, .tcdNumber, .nextPage, .prevPage {
  background: #fff !important;
  border: 1px solid var(--amz-line) !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
}
.tcdNumber.current, .pager .current {
  background: var(--amz-yellow) !important;
  border-color: #e0a44a !important;
  color: var(--amz-ink) !important;
  font-weight: 700 !important;
}
.disabled {
  opacity: 0.5 !important;
}

/* ---------------- 下单 / 支付步骤条 ---------------- */
.navlist_blue, .navlist_blue_left, .navlist_blue_right, .navlist_blue_arro {
  background: var(--amz-navy-2) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: var(--amz-navy-2) !important;
}
.navlist_gray, .navlist_gray_left, .navlist_gray_right, .navlist_gray_arro,
.navlist_gray_arrow {
  background: #f0f2f2 !important;
  background-image: none !important;
  color: var(--amz-ink-2) !important;
  border-color: var(--amz-line) !important;
}

/* ---------------- 账户中心侧栏 ---------------- */
/* 侧栏分组标题：旧表是 #997679 的褐紫渐变。
   注意结构是 <dl class="my_order"><dt>标题</dt><dd>子项</dd></dl>，
   着色的是 dt 而不是 dl —— 作用在 dl 上会在子项下方露出一条底色。 */
#leftsidebar_box dl {
  background: transparent !important;
  background-image: none !important;
}
#leftsidebar_box dl > dt {
  background: var(--amz-navy-2) !important;
  background-image: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 4px !important;
}
#leftsidebar_box dl > dt * {
  color: #fff !important;
}
#leftsidebar_box dl > dd {
  background: #fff !important;
}
#leftsidebar_box dl > dd span, #leftsidebar_box dl > dd a {
  color: var(--amz-link) !important;
}
#leftsidebar_box dl > dd span:hover, #leftsidebar_box dl > dd a:hover {
  color: var(--amz-link-h) !important;
}
/* 圆形关闭按钮等零散的褐紫控件 */
.cha {
  background: var(--amz-navy-3) !important;
  background-image: none !important;
  color: #fff !important;
}
#leftsidebar_box a {
  color: var(--amz-link) !important;
}
#leftsidebar_box a:hover {
  color: var(--amz-link-h) !important;
  text-decoration: underline;
}
.rs_header_active, .dzmc_active {
  color: var(--amz-link-h) !important;
  border-bottom: 3px solid var(--amz-yellow-h) !important;
  font-weight: 700 !important;
}

/* ---------------- 弹窗 ---------------- */
.modal_dialog {
  background: #fff !important;
  border: 1px solid var(--amz-line) !important;
  border-radius: var(--amz-radius) !important;
  box-shadow: 0 8px 24px rgba(15, 17, 17, 0.25) !important;
}
.modal_header {
  background: #f7fafa !important;
  background-image: none !important;
  border-bottom: 1px solid var(--amz-line) !important;
  color: var(--amz-ink) !important;
  font-weight: 700 !important;
  border-radius: var(--amz-radius) var(--amz-radius) 0 0 !important;
}
.yes {
  background: var(--amz-btn) !important;
  border: 1px solid #fcd200 !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
}

/* ---------------- 登录 / 注册 ---------------- */
/* 覆盖 ui-enhance.css 里的蓝色渐变主题，改为亚马逊白底卡片 */
body.auth-page,
.auth-page {
  background: #fff !important;
  color: var(--amz-ink) !important;
}
/* 顶部品牌条：居中，向亚马逊登录页看齐 */
.auth-page #top .top {
  text-align: center !important;
  color: var(--amz-ink) !important;
}
.auth-page #top .top span {
  color: var(--amz-ink) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}
.auth-page #container {
  background: #fff !important;
}
.auth-page #cover, .auth-page .login_box, .auth-page .register_box {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: var(--amz-radius) !important;
  box-shadow: none !important;
}
.auth-page .button_login, .auth-page #bt-login, .auth-page #bt-register,
.auth-page .sub_btn, .auth-page input[type="submit"], .auth-page button[type="submit"] {
  background: var(--amz-btn) !important;
  background-image: none !important;
  border: 1px solid #fcd200 !important;
  border-radius: var(--amz-radius) !important;
  color: var(--amz-ink) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5) !important;
  text-shadow: none !important;
}
.auth-page .button_login:hover, .auth-page #bt-login:hover,
.auth-page #bt-register:hover, .auth-page .sub_btn:hover {
  background: var(--amz-btn-h) !important;
}
/* 旧表用 border-radius:999px 的蓝色胶囊按钮，这里改回亚马逊的小圆角 */
.auth-page .button_login, .auth-page #bt-login, .auth-page #bt-register {
  border-radius: var(--amz-radius) !important;
}

/* 注册页的卡片是 .panel（不是 #cover），旧表给了固定高度，
   表单会溢出到卡片外面。放开高度让卡片包住内容。 */
.auth-page .panel, .auth-page #form-register {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.auth-page .panel {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: var(--amz-radius) !important;
  box-shadow: none !important;
  padding-bottom: 26px !important;
}

/* 顶部那张紫色 logo.png 与整站配色冲突，换成与头部同款的文字标志 */
.auth-page #top .top a img {
  display: none !important;
}
.auth-page #top .top a::before {
  content: "Colin";
  color: var(--amz-ink);
  font-size: 26px;
  font-weight: 800;
}
.auth-page #top .top a::after {
  content: "商城";
  color: var(--amz-link-h);
  font-size: 26px;
  font-weight: 800;
}
.auth-page #top .top a {
  text-decoration: none !important;
}
/* 登录/注册页页脚里同样那张紫色 logo */
.auth-page .footLogo, .auth-page .footer1 img {
  display: none !important;
}
.auth-page .footer1::after {
  content: "Colin 商城";
  color: var(--amz-ink-2);
  font-size: 15px;
  font-weight: 700;
}

/* ---------------- 杂项 ---------------- */
.line, hr {
  border-color: var(--amz-line) !important;
}
.footMark, .change_hint, .confirm_hint {
  color: var(--amz-ink-2) !important;
}