/*
  Rubyfpv · X1 offer 模块样式 · /assets/offer/offer.css · G4 · 2026-10-31（用法见 offer.js 顶部注释）
  只给最基础的状态样式和动效。除了「hidden 一定隐藏」和读屏文字，全部包在 :where() 里（0 优先级），
  页面自己的按钮类、价格类一定能覆盖。颜色只用站点色板。
*/

/* The module hides countdown (outside launch) and cny (outside Chinese) with [hidden]; a page's display rule must not undo it. */
[data-offer][hidden] { display: none !important; }

/* Screen-reader-only words ("Regular price" before the struck-through $39). */
.rf-offer-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Numbers never change width while they update. */
:where([data-offer="price"], [data-offer="countdown"], [data-offer="cny"], [data-offer="cta"]) { font-variant-numeric: tabular-nums; }

/* ---------- price ---------- */
:where(.rf-offer-now) { white-space: nowrap; }
/* The digits sit in one grid cell; on a price change the old copy slides up and out, the new one rises in (320ms, offer.js).
   clip-path clips without turning the box into a scroll container, so the baseline stays where the text is. */
:where(.rf-offer-roll) { display: inline-grid; clip-path: inset(0 -.25em); }
:where(.rf-offer-roll) > * { grid-area: 1 / 1; }
:where(.rf-offer-was) { margin-left: .3em; font-size: .6em; color: #6B655F; text-decoration-thickness: .07em; }
/* soon: "首发价 · 开卖后 7 天内有效" sits on its own small line under the number (a long note never wraps beside a big $29) */
:where(.rf-offer-note) {
  display: block; margin-top: 6px;
  font: 500 max(13px, .25em)/1.45 var(--rf-face-sans), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #4A4650;
}

/* ---------- countdown / cny ---------- */
:where([data-offer="countdown"]) { color: #4A1530; }
:where([data-offer="cny"]) { color: #4A4650; }
:where(.rf-offer-alipay, .rf-offer-wechat) { display: block; }
:where(.rf-offer-wechat) { color: #4A1530; }

/* ---------- default looks, only for hooks the page left without a class ---------- */
:where(.rf-offer-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: #0E0C10; color: #FAF6EF;
  font: 600 16px/1.2 var(--rf-face-sans), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  text-decoration: none; cursor: pointer;
  transition: background-color .24s cubic-bezier(.19, 1, .22, 1);
}
:where(.rf-offer-btn):hover { background: #4A1530; color: #FAF6EF; }
:where(.rf-offer-btn):active { background: #B8407A; }
:where(.rf-offer-btn):focus-visible { outline: 2px solid #D0538F; outline-offset: 3px; }
:where(.rf-offer-link) { color: #4A1530; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:where(.rf-offer-link):hover { color: #B8407A; }
:where(.rf-offer-link):focus-visible { outline: 2px solid #D0538F; outline-offset: 2px; border-radius: 2px; }

/* ---------- state change: the button comes in (420ms, expo-out). The "to" values are the page's own. ---------- */
.rf-offer-enter { animation: rf-offer-enter 420ms cubic-bezier(.19, 1, .22, 1) backwards; }
@keyframes rf-offer-enter { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .rf-offer-enter { animation: none; }
  :where(.rf-offer-btn) { transition: none; }
}