/* 自托管字体（latin 子集，可变字体一个文件覆盖多个字重），不再请求 Google Fonts，避免把访客 IP 发给第三方 */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(../fonts/cinzel-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/noto-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Site-wide stylesheet for every non-admin page. Loaded once by
   MasterPage/Site.master, so this is the ONLY stylesheet in play
   for all customer-facing pages (the `a/` admin backend has its
   own separate css/admin.css and is not affected by anything here).
   Reset, layout, colors, typography, and shared components (buttons,
   content cards, the homepage hero carousel, order form) all live
   in this one file — there should be no other page-specific
   stylesheets left in the non-admin part of the site.
   ============================================================ */

/* 字体改成 _Layout.cshtml 里的 <link rel="stylesheet">，不走这里的 @import——CSS @import
   是串行的：浏览器要先下载解析完这个文件、碰到 @import 才会去发第二个请求拿字体表，等于
   把字体表的下载硬生生拖到主样式表之后，实测首页 LCP 元素因此晚渲染了 2 秒多。改成 HTML
   <link> 之后浏览器能一开始解析 <head> 就并行把两个请求都发出去。 */

:root {
    --bg: #05070a;
    --bg-elevated: #10151d;
    --bg-card: #141a24;
    --gold: #ffb100;
    --gold-soft: #e2c7a3;
    --gold-deep: #d59d52;
    --gold-line: #c9a35c;
    --text: #e8dcc8;
    --text-muted: #a8987c;
    --accent-blue: #4fb3e0;
    --danger: #e04b4b;
    --border: rgba(201, 163, 92, 0.25);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --font-heading: 'Cinzel', Georgia, serif;
    --font-body: 'Noto Sans', Arial, Verdana, sans-serif;
    /* shared width for every module (nav, carousel, order form, testimonials)
       so they all line up on one centered column instead of drifting to
       different widths/alignments. */
    --content-width: 1200px;
}

/* ---------- reset (this page owns its whole document, no base stylesheet) ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Kept for screen readers / search engines, hidden visually. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    min-width: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font-family: inherit;
    color: inherit;
}

/* Most <asp:TextBox> controls across the site render as a plain,
   unthemed browser input (white/light background), so inheriting the
   theme's light cream text color makes typed text nearly unreadable.
   Give plain text-entry controls dark text by default; controls that
   are explicitly themed with a dark background (e.g. .fote input)
   override this further down. */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    color: #1a1108;
}

/* the dropdown popup itself is rendered by the OS/browser with a light
   background that CSS can't reliably repaint, so the light theme text
   color becomes nearly invisible there — force readable dark text on
   each option regardless of how the closed <select> is themed. */
select option {
    color: #1a1108;
    background: #fff;
}

input[type="image"] {
    border: 0;
}

form {
    margin: 0;
}

/* ---------- fluid page container ---------- */
#wrapper {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- header: 左边品牌字标，右边导航；手机上导航收进右上角的菜单按钮 ---------- */
#header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    margin-bottom: 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.brand-logo {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-soft);
}

.brand-logo span {
    color: var(--gold);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 菜单按钮：只在窄屏出现（见文件底部的断点），三条杠，展开时变成 X */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-right: -10px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--gold-soft);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
    color: var(--gold);
    background: rgba(255, 177, 0, 0.12);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, background 0.2s ease;
}

.nav-toggle-bars {
    position: relative;
    margin: 0 auto;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before {
    top: -7px;
}

.nav-toggle-bars::after {
    top: 7px;
}

.nav-open .nav-toggle-bars {
    background: transparent;
}

.nav-open .nav-toggle-bars::before {
    transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle-bars::after {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav li {
    flex: 0 0 auto;
}

.site-nav li a {
    display: block;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--gold-line);
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.site-nav li a:hover,
.site-nav li a.is-active {
    background: rgba(255, 177, 0, 0.12);
    color: var(--gold);
}

/* 已登录会员那个二级菜单——鼠标悬停/键盘 focus 展开，触屏没有 hover，靠 _Layout.cshtml
   里的点击切换 .is-open 展开。跟原生 <select> 弹出层完全无关，不受 carousel 那个
   "聚焦下拉框自动暂停轮播"的逻辑影响。 */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > a::after {
    content: " \25BE";
    font-size: 10px;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 160px;
    margin-top: 4px;
    padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu li a,
.nav-dropdown-menu li button {
    display: block;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    padding: 8px 12px;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--gold-line);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li button:hover {
    background: rgba(255, 177, 0, 0.12);
    color: var(--gold);
}

/* Log Out 跟前面那几个正常功能项隔开一条线，减少手滑点错的概率。 */
.nav-dropdown-menu li.nav-dropdown-divider {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* 首页可见 H1：放在轮播上面，样式跟内容页标题 .content_h3 一致（Cinzel、26px、gold-soft），
   上下间距收紧，不把下单表单往下推太多。 */
/* H1 收在轮播外框里当卡片顶部的常驻标题；--hc-title-h 是标题占的高度，箭头按"标题以下的轮播区域"居中。 */
.hero-carousel {
    --hc-title-h: 57px;
}

.hero-carousel > .home-title {
    margin: 0;
    padding: 18px 36px 0;
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1.3;
    color: var(--gold-soft);
    /* 浮在幻灯片的渐变上面（幻灯片向上延伸盖住标题区），标题和轮播是同一块背景。 */
    position: relative;
    z-index: 1;
}

/* 内容页上的"Last updated: ..."一行（如 /support/safe），小字弱化。 */
.site-content .content_listup p.last-updated {
    font-size: 12px;
}

/* ---------- hero carousel ---------- */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: var(--content-width);
    margin: 12px auto 28px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: linear-gradient(160deg, #0c1620 0%, #05070a 70%);
}

.hero-carousel .hc-track {
    position: relative;
    height: 260px;
}

.hero-carousel .hc-slide {
    position: absolute;
    inset: calc(-1 * var(--hc-title-h)) 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: calc(24px + var(--hc-title-h)) 36px 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(24px);
    transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
    background-repeat: no-repeat;
}

.hero-carousel .hc-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.hero-carousel .hc-slide.hc-fast {
    background-image: radial-gradient(circle at 15% 40%, rgba(255, 177, 0, 0.18), transparent 60%);
}

.hero-carousel .hc-slide.hc-safe {
    background-image: radial-gradient(circle at 15% 40%, rgba(79, 179, 224, 0.18), transparent 60%);
}

.hero-carousel .hc-slide.hc-cheap {
    background-image: radial-gradient(circle at 15% 40%, rgba(226, 199, 163, 0.16), transparent 60%);
}

.hero-carousel .hc-slide.hc-support {
    background-image: radial-gradient(circle at 15% 40%, rgba(224, 75, 75, 0.14), transparent 60%);
}

.hero-carousel .hc-slide.hc-refund {
    background-image: radial-gradient(circle at 15% 40%, rgba(180, 140, 255, 0.16), transparent 60%);
}

.hero-carousel .hc-slide.hc-versions {
    background-image: radial-gradient(circle at 15% 40%, rgba(201, 163, 92, 0.2), transparent 60%);
}

.hero-carousel .hc-slide.hc-market {
    background-image: radial-gradient(circle at 15% 40%, rgba(79, 195, 217, 0.16), transparent 60%);
}

.hero-carousel .hc-slide.hc-affiliate {
    background-image: radial-gradient(circle at 15% 40%, rgba(240, 160, 75, 0.16), transparent 60%);
}

.hero-carousel .hc-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-carousel .hc-art {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    order: -1;
}

.hero-carousel .hc-art svg {
    width: 100%;
    height: 100%;
}

.hero-carousel .hc-icon {
    display: none;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.hero-carousel .hc-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
}

.hero-carousel .hc-body h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--gold-soft);
    margin-bottom: 6px;
}

.hero-carousel .hc-body h2 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hero-carousel .hc-body h2 a:hover,
.hero-carousel .hc-body h2 a:focus-visible {
    color: var(--gold);
    text-decoration: underline;
}

.hero-carousel .hc-body p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 460px;
}

.hero-carousel .hc-body p a {
    color: inherit;
    text-decoration: underline;
}

.hero-carousel .hc-body p a:hover,
.hero-carousel .hc-body p a:focus-visible {
    color: var(--gold-soft);
}

.hero-carousel .hc-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}

.hero-carousel .hc-dots button {
    /* 可点区域撑到 24x24（无障碍触控目标最小尺寸），可见的圆点还是靠 ::before 画成原来的
       9x9，视觉上不变。 */
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-carousel .hc-dots button::before {
    content: "";
    width: 9px;
    height: 9px;
    border: 1px solid var(--gold-line);
    border-radius: 50%;
    background: transparent;
}

.hero-carousel .hc-dots button.is-active::before {
    background: var(--gold);
}

.hero-carousel .hc-arrow {
    position: absolute;
    top: calc(50% + var(--hc-title-h) / 2);
    transform: translateY(-50%);
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(5, 7, 10, 0.6);
    color: var(--gold-soft);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.hero-carousel .hc-arrow:hover {
    background: rgba(255, 177, 0, 0.15);
}

.hero-carousel .hc-prev {
    left: 12px;
}

.hero-carousel .hc-next {
    right: 12px;
}

/* ---------- breadcrumb ---------- */
.breadcrumb {
    display: block;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto 12px;
    padding: 0 2px;
    font-family: var(--font-body);
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.user-bar {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    color: var(--text-muted);
}

.user-bar form {
    margin: 0;
}

.user-bar-logout {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gold-line);
    cursor: pointer;
}

.user-bar-logout:hover {
    color: var(--gold);
}

.breadcrumb-node {
    color: var(--gold-line);
}

.breadcrumb-node:hover {
    color: var(--gold);
}

.breadcrumb-current {
    color: var(--text-muted);
}

.breadcrumb-sep {
    color: var(--text-muted);
    padding: 0 4px;
}

/* ---------- content area ---------- */
#content {
    padding-bottom: 40px;
}

/* ---------- shared content pages ---------- */
.site-content > .content_h3,
.site-content > .content_listup,
.site-content > .content {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

/* 连着的两个卡片（首页 Testimonials 和 FAQ）之间留出间距 */
.site-content > .content_listup + .content_listup {
    margin-top: 24px;
}

.site-content > .content_h3 {
    margin-top: 12px;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--gold-soft);
}

.site-content > .content_listup,
.site-content > .content {
    padding: 24px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    color: var(--text);
}

.site-content .content_listup h2 {
    margin: 20px 0 8px;
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--gold-soft);
}

.site-content .content_listup h2:first-child {
    margin-top: 0;
}

.site-content .content_listup p,
.site-content .content_listup li {
    color: var(--text-muted);
    line-height: 1.7;
}

/* the reset at the top of this file zeroes all margins, so consecutive
   <p>/<ul>/<ol> blocks need this back or long-form pages (Privacy,
   Agreement, About Us) read as one unbroken wall of text. */
.site-content .content_listup p + p,
.site-content .content_listup h2 + p,
.site-content .content_listup p + ul,
.site-content .content_listup p + ol,
.site-content .content_listup ul + p,
.site-content .content_listup ol + p {
    margin-top: 12px;
}

.site-content .content_listup a,
.site-content .content a {
    color: var(--gold);
}

.site-content .content_listup ul {
    list-style: disc;
    padding-left: 20px;
}

.site-content .content_listup ol {
    list-style: decimal;
    padding-left: 20px;
}

.site-content .content_listup ol ol {
    list-style-type: lower-alpha;
    margin-top: 6px;
}

.site-content .content_listup li + li {
    margin-top: 6px;
}

.site-content .content_listup ol.steps-list > li {
    margin-top: 16px;
}

.site-content .content_listup ol.steps-list h2 {
    margin: 0 0 6px;
}

.pic {
    text-align: center;
}

/* shared inline-emphasis helpers, used in place of ad-hoc style="..." attributes */
.site-content .content_listup .warning-text {
    color: var(--danger);
}

.center-actions {
    text-align: center;
}

.checkout-actions {
    text-align: right;
    margin-top: 10px;
}

/* label preceding a form control outside the .fote order form (Notify, Stock) */
.field-label {
    color: var(--gold-soft);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
}

/* RateUs.aspx rating rows */
.rating-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.rating-row label {
    flex: 0 0 160px;
    color: var(--gold-soft);
    font-weight: 600;
}

/* ---------- Testimonials page: rating summary + quote cards ---------- */
.stat-summary {
    margin: 4px 0 22px;
}

.stat-total {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.stat-total strong {
    font-size: 22px;
    color: var(--gold);
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stat-card {
    padding: 14px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
}

.stat-card .stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--gold);
}

.stat-card .stat-label {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
}

/* 模块标题行：标题在左，"Read more" 链接在右上角 */
.module-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.module-head a {
    flex: 0 0 auto;
    font-size: 13px;
    white-space: nowrap;
}

.testimonial-list {
    display: grid;
    gap: 14px;
    margin-top: 4px;
}

.testimonial-card {
    padding: 16px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-line);
    border-radius: 4px 10px 10px 4px;
}

.testimonial-quote {
    margin: 0;
    color: var(--text);
    line-height: 1.7;
    font-style: italic;
}

.testimonial-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 16px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

.testimonial-meta {
    color: var(--gold-soft);
}

.testimonial-date {
    margin-left: auto;
    color: var(--text-muted);
}

/* Support/Default.aspx category link list */
.faq-list li {
    padding-left: 20px;
    padding-top: 10px;
}

/* Gold.cshtml 的 FAQ 问答（TBC Anniversary hub 手写的那段 + 其它游戏通用的那段，都是同一套 <dl>）。 */
.content_listup dl {
    margin: 16px 0 0;
}

.content_listup dl dt {
    font-weight: 600;
    color: var(--text);
    margin-top: 16px;
}

.content_listup dl dt:first-child {
    margin-top: 0;
}

.content_listup dl dd {
    margin: 6px 0 0;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.content_listup dl dd:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

/* ---------- About Us: mission/value/location/history cards ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 4px;
}

.about-card {
    padding: 18px 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.about-card h2 {
    margin: 0 0 8px !important;
}

.about-card p {
    margin: 0 !important;
}

@media (max-width: 640px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- jump-to-section table of contents for long-form pages
   (Privacy Policy, Agreement) ---------- */
.toc {
    padding: 16px 20px;
    margin-bottom: 22px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.toc-title {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gold-soft);
}

.toc-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.toc-list li {
    padding: 0 !important;
}

.toc-list a {
    display: block;
    padding: 3px 0;
    font-size: 13px;
}

@media (max-width: 640px) {
    .toc-list {
        grid-template-columns: 1fr;
    }
}

.site-content .content_listup h2[id] {
    scroll-margin-top: 20px;
}

@media (max-width: 640px) {
    .stat-cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- shared button style, used by every <asp:Button>/<asp:LinkButton>/
   plain <button> across the site (Checkout, MyOrders, Trade, Verify, Notify,
   RateUs, Login/Register/ChangePassword, ...) ---------- */
.button {
    display: inline-block;
    padding: 10px 22px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
    color: #1a1108;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.1s ease;
}

.button:hover {
    filter: brightness(1.08);
}

.button:active {
    transform: translateY(1px);
}

.button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* .site-content .content_listup a { color: var(--gold) } (further down this file) beats the
   plain .button rule on specificity, so an <a class="button"> inside .content_listup (e.g. the
   My Orders pager) rendered gold-on-gold — unreadable. Needs to out-specificity that rule. */
.site-content .content_listup a.button,
.site-content .content a.button {
    color: #1a1108;
}

/* .button-secondary drops the solid gold background for a transparent/outlined look (see
   .button-secondary below), so the #1a1108 dark text from the a.button rule above turns
   invisible against the page's dark background — needs its own higher-specificity override
   (e.g. the "Buy Now" links on Stock.cshtml). */
.site-content .content_listup a.button.button-secondary,
.site-content .content a.button.button-secondary {
    color: var(--gold-soft);
}

/* ---------- account summary + form panels (My Account, and any other
   plain-field form that wants a tidier look than the bare label/input
   pairs used on Login/MyOrders) ---------- */
.account-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted) !important;
}

.account-summary strong {
    color: var(--gold-soft);
}

.form-panel {
    padding: 20px 22px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.form-panel + .form-panel {
    margin-top: 18px;
}

.form-panel h2 {
    margin-top: 0 !important;
}

/* Order info block (Checkout/Verify/Trade/OrderDetail all show the same "Order #..."
   summary panel) — each fact reads as a small muted label next to its value, and
   related facts (Placed+Amount, Game+Server+Quantity, Character+Item/Guild) sit on
   the same row when there's room instead of one flat "Label: value | Label: value"
   line of body text with no visual hierarchy. */
.order-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 22px;
    margin: 0;
}

.order-info-row + .order-info-row {
    margin-top: 8px;
}

.order-field {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.order-field-label {
    color: var(--gold-soft);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.order-field-value {
    color: var(--text);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
}

.form-row + .form-row {
    margin-top: 14px;
}

.form-row label {
    color: var(--gold-soft);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
}

.form-panel input[type="password"],
.form-panel input[type="email"],
.form-panel input[type="text"],
.form-panel input[type="number"],
.form-panel select,
.form-panel textarea {
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text) !important;
    font-family: var(--font-body);
    font-size: 14px;
}

.form-panel textarea {
    resize: vertical;
}

.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus {
    outline: none;
    border-color: var(--gold-line);
}

/* RateUs.cshtml five-star rating rows. Classic radio+label trick: the radios
   are laid out 5-star..1-star in DOM order but reversed visually (row-reverse),
   so ":checked ~ label" and "label:hover ~ label" (general siblings, i.e. DOM
   order = visually *before* the hovered star) light up every star up to and
   including the one the user picked/is hovering. */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}

.star-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-row .star-rating label {
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    color: var(--border) !important;
    transition: color 0.15s ease;
}

.form-row .star-rating input:checked ~ label,
.form-row .star-rating input:focus-visible ~ label,
.form-row .star-rating label:hover,
.form-row .star-rating label:hover ~ label {
    color: var(--gold) !important;
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

/* Trade.cshtml: Delivery Method sits in its own GET-driven <form> (autosubmit
   on change), separate from the POST form below it that holds Character/Item
   Name/Item Price/Guild/Save — but visually they're one two-column layout:
   left column is Delivery Method + the method-specific identifier (Item Name
   for Auction House, Guild for Guild), right column is Character + Item
   Price + Save. "display: contents" on both forms drops their own box so
   each field becomes a direct grid item here and can be placed in whichever
   column it belongs to regardless of which <form> actually submits it. */
.trade-delivery-row {
    display: grid;
    /* 第三列是空的占位，只为让"跨整行"的交易方式说明（.delivery-description）能一直铺到面板右边界；
       表单字段都在前两列，不受影响。 */
    grid-template-columns: minmax(0, 320px) minmax(0, 320px) minmax(0, 1fr);
    /* dense packing: sparse (the default) advances a one-way cursor and
       won't backfill row 1's empty right cell once the left column's second
       row has been placed, which left Character stranded next to Item Name
       instead of Delivery Method. Dense lets each item claim the first open
       cell in its column regardless of source order, giving the intended
       Delivery Method|Character / Item Name|Item Price 2x2 grid. */
    grid-auto-flow: dense;
    gap: 14px 24px;
    align-items: start;
}

.trade-delivery-row form {
    display: contents;
}

.trade-delivery-row .grid-col-1 {
    grid-column: 1;
}

.trade-delivery-row .grid-col-2 {
    grid-column: 2;
}

/* Auction House / Guild: the left column gets a second row (Item Name /
   Guild) below Delivery Method, so Save should sit on a third row spanning
   below both columns' data rows, not beside that second row. Giving it an
   explicit row placement (rather than relying on auto-placement order) means
   it's reserved before Character/Item Name/Guild are auto-placed, so it
   always lands on row 3 regardless of source order. */
.trade-delivery-row .grid-row-3 {
    grid-row: 3;
}

.trade-delivery-row .form-row {
    margin-top: 0;
    max-width: none;
}

.trade-delivery-row .form-actions {
    justify-content: flex-end;
    margin-top: 0;
}

/* 交易方式说明（DeliveryMethod.Description）：源码里排在 Save 按钮所在的表单后面，单独占一整行
   （第三列是空占位，让它能铺到面板右边界），所以总是落在 Save 的下一行。 */
.trade-delivery-row .delivery-description {
    grid-column: 1 / -1;
}

/* Not enough width for two 320px columns side by side — stack into one. */
@media (max-width: 640px) {
    .trade-delivery-row {
        grid-template-columns: 1fr;
    }

    .trade-delivery-row .grid-col-1,
    .trade-delivery-row .grid-col-2 {
        grid-column: 1;
    }

    /* 单列时不再手工指定行号，按源码顺序排（Save 在 Item Price 后面，说明在最后），
       否则 Save 的固定行号会让它跑到 Item Name / Item Price 前面。 */
    .trade-delivery-row .grid-row-3 {
        grid-row: auto;
    }
}

/* Trade.cshtml: whether the buyer can receive gold right now (Order.IsReadyToReceive) —
   a real on/off switch reads faster than a button whose own label doubles as
   the current-state description ("I am online..." vs "I have to leave..."). */
.switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.switch-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background 0.15s ease;
    pointer-events: none;
}

.switch-slider::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: var(--bg-card);
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.switch input:checked ~ .switch-slider {
    background: var(--gold);
}

.switch input:checked ~ .switch-slider::before {
    transform: translateX(18px);
}

.switch input:focus-visible ~ .switch-slider {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.form-actions .warning-text,
.form-actions .success-text {
    margin: 0;
}

.success-text {
    color: #6fbf8b;
}

/* friends list rows and reputation badges */
.friend-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.message-line {
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-mine strong {
    color: var(--gold);
}

.rep-badge {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--gold-line);
    border-radius: 10px;
    font-size: 12px;
    color: var(--gold-soft);
}

.rep-trusted,
.rep-veteran {
    color: #6fbf8b;
    border-color: #6fbf8b;
}

.rep-risk {
    color: var(--danger);
    border-color: var(--danger);
}

.button-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--gold-soft);
}

.button-secondary:hover {
    filter: none;
    border-color: var(--gold-line);
    color: var(--gold);
}

/* plain-text button styled as a link, e.g. MyOrders "not you?" */
.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--gold);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.link-button:hover {
    color: var(--gold-soft);
}

/* ---------- data tables (My Orders, Stock) ---------- */
.table-scroll {
    overflow-x: auto;
    margin: 4px 0 20px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table th {
    background: var(--bg-elevated);
    color: var(--gold-soft);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.data-table th:first-child {
    border-top-left-radius: 8px;
}

.data-table th:last-child {
    border-top-right-radius: 8px;
}

.data-table td {
    color: var(--text-muted);
}

.data-table tbody tr:hover {
    background: rgba(255, 177, 0, 0.05);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* dropdown filter row above a data table, e.g. Stock's game picker */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.filter-bar select {
    padding: 9px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text) !important;
    font-size: 14px;
}

.bottom {
    margin: 20px 0;
}

.bottom .left {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: var(--shadow);
}

.bottom h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    color: var(--gold-soft);
    margin-bottom: 16px;
}

/* Modules/OrderInfo.ascx — order summary card shown on Checkout/Verify/Trade/
   Cancel/RateUs, styled to match the homepage "Fast Order" card. */
.order-info-card {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: var(--shadow);
    color: var(--text);
}

.order-info-card h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--gold-soft);
    margin-bottom: 12px;
}

.order-info-card a {
    color: var(--gold);
}

/* order form: .fote ul li rows -> responsive flex rows */
.fote {
    color: var(--text);
}

.fote ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    /* 左右两列同一行的两个 li 高度可能不同，统一垂直居中，标签和控件的中线才对得上 */
    align-items: center;
}

/* 同一个 form 里的上下两个 ul（Game/Server/Delivery/Character 一块，Quantity/Currency/Payment 一块）是各自的 grid，
   中间没有 gap，Delivery 行会紧贴着 Quantity 行，补上跟行间距一样的 14px */
.fote ul + ul {
    margin-top: 14px;
}

/* forces a row to start a fresh grid line, so the row after it begins a new
   pair instead of continuing the current one (e.g. Payment alone so Delivery
   pairs with Character on the next row). */
.fote ul li.full-row {
    grid-column: 1 / -1;
}

/* each row keeps its own label + control on one line; it's only the rows
   themselves that get arranged into two columns, not label-above-control. */
.fote ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fote .field-label {
    flex: 0 0 120px;
    /* 标签后面的 "?" 提示图标是 inline-block，会把标签那一行撑高（Delivery / Payment Fee 行比别的行高 8-10px），
       改成 inline-flex 居中，图标不再影响行高 */
    display: inline-flex;
    align-items: center;
}

.fote select,
.fote input[type="text"] {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: 13px;
    min-width: 0;
    /* flex-wrap 判断要不要换行看的是 flex-basis 而不是实际能缩到多窄：basis 写大了，平板宽度下
       一栏只有 300 多 px，控件明明缩一缩就放得下也会被挤到标签下一行。basis 给小一点，
       宽度够时照样 grow 撑满，桌面上看起来跟原来一样。 */
    flex: 1 1 100px;
}

/* 拍卖行的 Item 字段：左半边 Item Name，右半边 Item Quantity + Item Price，宽屏下对半分。
   每一行（标签 + 控件）的样式跟其它行一致。 */
.fote ul li.auction-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    /* 左边只有一行（Item Name）、右边两行：顶部对齐，不要把左边那行垂直居中在右边两行之间 */
    align-items: start;
}

.auction-half {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* 每一行跟其它行一样：.field-label（120px）+ 控件，控件按 .fote select / input 的默认宽度伸展 */
.auction-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Item Quantity 和 Item Price 在同一行：数量下拉框定宽，第二个标签按内容宽度，价格框吃掉剩余空间 */
.auction-row-inline {
    flex-wrap: nowrap;
}

.fote .auction-row-inline select {
    flex: 0 0 80px;
}

.fote .auction-row-inline .field-label + select + .field-label {
    flex: 0 0 auto;
}

.auction-row-inline .amount-display {
    flex: 1 1 0;
    min-width: 0;
}

/* 平板宽度（两栏但每栏只有 300 来 px）：标签列从 120px 收到 100px（最长的 "Payment Fee: ?" 约 98px），
   把空间让给后面的控件，Quantity 这类一行多个控件的才放得下同一行。 */
@media (min-width: 641px) and (max-width: 1100px) {
    .fote .field-label {
        flex-basis: 100px;
    }
}

@media (max-width: 640px) {
    .fote ul li.auction-fields {
        grid-template-columns: 1fr;
    }
}

/* 服务器逐步筛选（地区 / Realm / 阵营）三个下拉框要挤在标签后面的同一行：默认每个 select 的 flex-basis 是 160px，
   三个加起来会换行，所以这一行改成"平分剩余宽度"，Realm 名字最长，多分一份。 */
.fote ul li.server-cascade select {
    flex: 1.1 1 0;
}

.fote ul li.server-cascade select[name="Region"] {
    flex: 1.4 1 0;
}

.fote ul li.server-cascade select[name="ServerRealm"] {
    flex: 1.8 1 0;
}

/* 手机宽度：Server 这一行跟别的行一样"标签 + 控件"在同一行，不让三个下拉框掉到标签下面。
   标签（104px，跟别的行一致）后面只剩 200 来 px，所以这一行不换行、下拉框缩小字号和内边距，名字太长就截断（点开能看完整）。 */
@media (max-width: 640px) {
    .fote ul li.server-cascade {
        flex-wrap: nowrap;
        gap: 4px;
    }

    /* 行间距收到 4px 后，标签和第一个下拉框之间补回 4px，跟别的行的控件左边缘对齐 */
    .fote ul li.server-cascade .field-label {
        margin-right: 4px;
    }

    .fote ul li.server-cascade select {
        padding: 6px 2px;
        font-size: 12px;
        text-overflow: ellipsis;
    }
}

/* 游戏下拉框旁边的 US / EU 地区过滤：很窄，不跟 Game 下拉框抢宽度。 */
.fote .game-region-select {
    flex: 0 0 72px;
    width: 72px;
}

/* Character 输入框后面的"去暴雪官网查角色"链接。 */
/* 样式跟 "Have a budget?"（.link-button.budget-toggle）一致：金色、下划线、12px，悬停变浅金。 */
.fote .character-verify-link {
    font-size: 12px;
    color: var(--gold);
    text-decoration: underline;
    white-space: nowrap;
}

.fote .character-verify-link:hover,
.fote .character-verify-link:focus-visible {
    color: var(--gold-soft);
}

/* 会员专属"显示全部游戏"toggle，紧挨在 Game 下拉框后面，字号比 field-label 小一号，
   跟旁边的 select 区分开，不抢主字段的视觉重量。 */
.show-all-games-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
}

/* 首页 Game 下拉框旁边的关注/取消关注星星——就是个纯文本按钮，不套 .button 那套边框/背景，
   免得在一排下拉框中间显得太重。 */
.follow-game-btn {
    background: none;
    border: none;
    padding: 0 4px;
    margin-left: 4px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
}

.follow-game-btn:hover {
    color: #e0a800;
}

/* 已关注的游戏涂成主题金色，跟星星本身是空心☆还是实心★双重区分（不只靠字形），
   在小尺寸/看不清字形细节时也能一眼分辨。 */
.follow-game-btn.is-followed {
    color: var(--gold);
}

/* Currency values are short ISO codes (for example, USD), so this control
   should not consume the entire form row. */
.fote .currency-select {
    flex: 0 0 90px;
    width: 90px;
}

/* The computed order total is read-only text, not a real input/select, but it
   sits in a field row next to a label like every other row (Server, Character,
   Currency, ...) — give it the same box + left-aligned layout so it reads as
   one consistent row style instead of looking like a stray label. */
.fote .amount-display {
    display: block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: var(--font-body);
    font-size: 13px;
    text-align: left;
    flex: 1 1 100px;
    min-width: 0;
}

/* Quantity row: a typed amount plus a preset-picker dropdown that's only there
   to fill in the typed field faster — both need to be narrow enough to sit on
   one line instead of each claiming a full flex-basis (min 80px for the typed
   amount so a 7-digit value is not clipped). Selectors need to
   out-specify ".fote input[type="text"]" / ".fote select" above, hence the
   repeated type qualifiers rather than just ".quantity-input"/".quantity-select". */
.fote input[type="text"].quantity-input {
    flex: 1 0 80px;
    max-width: 90px;
}

.fote select.quantity-select {
    flex: 1 1 70px;
    max-width: 120px;
}

/* Game.Unit (e.g. "G") next to the Quantity row — reusing .field-label here would
   force its 120px flex-basis onto a one-character tag, wide enough to push the row
   past its container and wrap; this stays exactly as wide as its own text. */
.quantity-unit {
    flex: 0 0 auto;
    color: var(--gold-soft);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
}

/* 按预算反推数量：跟 Total 金额框排在同一行（.budget-line 自己不占布局，子元素直接是 li 的 flex 项），
   展开成输入框后一行放不下就自动换到下一行；提示文字独占一行，左边空出标签列的宽度。 */
.fote .budget-line {
    display: contents;
}

.fote .budget-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.fote .budget-edit[hidden],
.fote .budget-toggle[hidden],
.fote .budget-note[hidden] {
    display: none;
}

.fote .budget-toggle {
    flex: 0 0 auto;
    white-space: nowrap;
}

.fote .budget-note {
    flex: 1 0 100%;
    padding-left: 128px;
    color: var(--text-muted);
}

.fote .budget-note.warning-text {
    color: var(--danger);
}

.fote .budget-toggle,
.fote .budget-clear {
    font-size: 12px;
}

.fote select:focus,
.fote input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Checkout button sits in its own tiny <ul> (separate <form> so its hidden
   fields don't collide with the GET-driven configurator above) — span both
   grid columns and push it to the right instead of leaving it stuck in the
   left column with the whole row empty beside it. */
.fote .checkout-row {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.fote span {
    font-size: 12px;
}

/* 只给 Checkout 那一行（以前写成 li:last-child，会连带把配置区最后一个 li——Character / Total——也往下推 10px，跟左边对不齐） */
.fote li.checkout-row {
    justify-content: flex-end;
    margin-top: 10px;
}

/* ---------- footer ---------- */
#footer {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 4px 0 24px;
    text-align: center;
}

/* 全站 Games 卡片（_Layout 里 main 的最后一块）：卡片外观沿用 .content_listup，
   这里只管和上一块的间距、分组小标题和胶囊链接。链接自动换行，窄屏不横向溢出。 */
.site-content > .footer-games {
    margin-top: 24px;
}

.site-content .footer-games-group + .footer-games-group {
    margin-top: 14px;
}

.site-content .footer-games h3 {
    margin: 10px 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-content .footer-games ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 全站列表规则会给相邻 li 加上边距，胶囊按钮之间的间距统一交给 ul 的 gap */
.site-content .footer-games li,
.site-content .footer-games li + li {
    margin: 0;
    line-height: 1;
}

.site-content .footer-games a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.site-content .footer-games a:hover,
.site-content .footer-games a:focus-visible {
    color: var(--gold);
    border-color: var(--gold-line);
}

@media (max-width: 640px) {
    .site-content .footer-games a {
        min-height: 40px;
        padding: 0 12px;
    }
}

/* 页脚最下面两行：左右内边距跟上面卡片（.content_listup 的 28px）里的文字对齐。 */
#footer #copyright {
    padding: 0 29px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: left;
}

#footer .footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}

#footer .footer-copy {
    color: var(--text-muted);
}

#footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#footer .footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

/* 链接之间用圆点分隔，圆点不跟着链接变色 */
#footer .footer-links a + a::before {
    content: "\00B7";
    display: inline-block;
    margin: 0 10px;
    color: var(--border);
    pointer-events: none;
}

#footer .footer-links a:hover,
#footer .footer-links a:focus-visible {
    color: var(--gold);
}

#footer .footer-disclaimer {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
    opacity: 0.75;
}

@media (max-width: 640px) {
    /* 手机上 #footer 贴屏幕边，左右留 14px 跟卡片（#wrapper 的 14px）对齐 */
    #footer #copyright {
        padding: 0 14px;
        text-align: center;
    }

    #footer .footer-bar {
        flex-direction: column;
        gap: 6px;
    }

    #footer .footer-links {
        justify-content: center;
    }

    /* 手机上链接加高，方便点 */
    #footer .footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }
}

/* ---------- Delivery Method balloon tooltip (AjaxControlToolkit
   BalloonPopupExtender on the homepage order form) — the toolkit ships
   its own light, image-sprite skin that clashes with the dark theme,
   so strip its background images and restyle it as a themed card. ---------- */
/* the toolkit's own stylesheet sets background-image on ".ajax__balloon_popup .rect"
   with !important and loads after home.css, so an equal-specificity !important rule
   here would lose on source order — repeat the outer class to outrank it. */
.ajax__balloon_popup.ajax__balloon_popup .rect,
.ajax__balloon_popup.ajax__balloon_popup .large {
    background-image: none !important;
    background-color: transparent !important;
}

.ajax__balloon_popup.ajax__balloon_popup > span.rect {
    display: block;
    background: var(--bg-card) !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.ajax__balloon_popup .ajax__content {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 18px 22px;
    overflow-y: auto;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.7;
}

.ajax__balloon_popup .ajax__content ol {
    list-style: decimal;
    padding-left: 20px;
}

/* the FormView holding this content sits inside the homepage order form's
   <ul class="fote">, so ".fote ul li { display: flex; }" reaches these <li>
   too and suppresses their numbers (list markers don't render on flex
   items) — force them back to normal list items. */
.ajax__balloon_popup .ajax__content li {
    display: list-item !important;
}

.ajax__balloon_popup .ajax__content li + li {
    margin-top: 8px;
}

.ajax__balloon_popup .ajax__content .warning-text {
    color: var(--danger);
}

.ajax__balloon_popup .ajax__content img {
    margin-top: 4px;
    border-radius: 6px;
}

/* ============================================================
   Breakpoints (mobile-first overrides above already work down to
   ~1024px; these narrow things further for tablet/phone)
   ============================================================ */

@media (max-width: 640px) {
    #wrapper {
        padding: 0 14px;
    }

    .brand-logo {
        font-size: 22px;
    }

    /* 手机上轮播以前插画+文字竖着叠，占了 300px 以上，把标题和下单表单挤出第一屏。
       现在去掉插画，只留一条紧凑的文字横幅（标题+一句话），高度压到 ~160px，
       标题、表单和价格能在第一屏露出来；轮播的文案和指向 Support 页的链接都还在。 */
    .hero-carousel {
        margin: 8px auto 16px;
    }

    .hero-carousel .hc-track {
        height: auto;
        min-height: 160px;
    }

    .hero-carousel .hc-slide {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        /* 左右留出 44px 给两侧箭头，底部留给圆点 */
        padding: calc(14px + var(--hc-title-h)) 44px 34px;
    }

    .hero-carousel .hc-copy {
        flex-direction: column;
        text-align: center;
    }

    .hero-carousel .hc-art {
        display: none;
    }

    .hero-carousel .hc-body h2 {
        font-size: 18px;
    }

    .hero-carousel .hc-body p {
        max-width: none;
        font-size: 13px;
        line-height: 1.5;
    }

    /* 插画去掉之后幻灯片很矮，箭头放回垂直居中，靠两侧的 padding 跟文字错开。 */
    .hero-carousel {
        --hc-title-h: 42px;
    }

    .hero-carousel .hc-arrow {
        top: calc(50% + var(--hc-title-h) / 2);
        transform: translateY(-50%);
    }

    .hero-carousel > .home-title {
        padding: 14px 20px 0;
        font-size: 20px;
    }

    .bottom .left {
        padding: 20px;
    }

    .fote ul {
        /* minmax(0, 1fr)：Server 那行不换行，列要允许收缩，不然会被它撑出表单边界 */
        grid-template-columns: minmax(0, 1fr);
    }

    /* 手机上标签和控件也放同一行：标签定宽（最长的 "Payment Fee: ?" 约 98px），控件吃剩下的宽度 */
    .fote .field-label {
        flex: 0 0 104px;
    }

    .fote select,
    .fote input[type="text"] {
        flex: 1 1 0;
    }
}

/* ---------- 语言切换（Google 翻译，见 wwwroot/js/lang-switch.js） ---------- */
.nav-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-lang > a.nav-lang-toggle::after {
    content: " \25BE";
    font-size: 10px;
}

/* 语言按钮在导航最右边，菜单向左展开，不然会冲出屏幕右边 */
.nav-lang .nav-dropdown-menu {
    left: auto;
    right: 0;
    min-width: 150px;
}

.nav-lang .nav-dropdown-menu a.is-current {
    color: var(--gold);
    background: rgba(255, 177, 0, 0.12);
}

/* Google 翻译脚本的承载元素和它自带的顶部横幅/提示条都藏掉，界面只留我们自己的语言按钮 */
.gt-host {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body {
    top: 0 !important;
}

.skiptranslate iframe,
iframe.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* ---------- 窄屏页头：导航收进右上角菜单按钮 ----------
   用 .js 前缀限定：脚本没跑起来时导航照常显示，不会把用户锁在菜单外面。 */
@media (max-width: 1260px) {
    .brand-logo {
        font-size: 22px;
    }

    .js .nav-toggle {
        display: block;
    }

    .js .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 8px;
        background: var(--bg-elevated);
        border: 1px solid var(--border);
        border-top: none;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .js .nav-open .site-nav {
        display: flex;
    }

    .site-nav li a {
        padding: 12px 14px;
        font-size: 14px;
    }

    /* 手机上 My Account 不做悬浮二级菜单，子项直接缩进展开在下面 */
    .js .nav-dropdown > a::after {
        content: none;
    }

    .js .nav-dropdown-menu {
        display: block;
        position: static;
        min-width: 0;
        margin: 0 0 0 14px;
        padding: 0 0 0 8px;
        background: none;
        border: none;
        border-left: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
    }

    .nav-dropdown-menu li a,
    .nav-dropdown-menu li button {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* 语言列表有九项，手机上默认收起，点语言按钮再展开，免得把菜单撑得太长 */
    .js .nav-lang .nav-dropdown-menu {
        display: none;
        margin-left: 14px;
        padding-left: 8px;
    }

    .js .nav-lang.is-open .nav-dropdown-menu {
        display: block;
    }

    .js .nav-lang > a.nav-lang-toggle::after {
        content: " \25BE";
    }

    /* Prices / Guides / Support 跟语言列表一样，手机上默认收起，点标题再展开 */
    .js .nav-fold .nav-dropdown-menu {
        display: none;
    }

    .js .nav-fold.is-open .nav-dropdown-menu {
        display: block;
    }

    .js .nav-fold > a::after {
        content: " \25BE";
    }
}

/* 价格项旁边的 "?" 说明：纯 CSS，悬停/键盘聚焦/手机点按都能弹出，文案在 data-tip 里 */
.help-tip {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    cursor: help;
    opacity: 0.7;
}

.help-tip:hover,
.help-tip:focus {
    opacity: 1;
    outline: none;
}

.help-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    z-index: 20;
    width: 210px;
    padding: 8px 10px;
    border: 1px solid var(--gold-soft);
    border-radius: 6px;
    background: #1a1a1a;
    color: #eee;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    display: none;
    pointer-events: none;
}

.help-tip:hover::after,
.help-tip:focus::after {
    display: block;
}