/* ⚠⚠ 本文件禁止使用 CSS 的 round()。
   round() 要 Chrome 125+（2024/05）。钉钉内置浏览器是 Chrome 100 内核（UWS），
   线上实测大量用户打开是坏的：字号退回默认、间距全塌。

   ⚠ 「前面垫一条 calc() 兜底」的写法**不管用**，别再试：
     round(down, calc(N * var(--px)), 1px) 里含 var()，浏览器解析阶段
     无法判断合法性只能先收下，到求值阶段才发现 round() 不认识 ——
     这叫 invalid at computed-value time，该属性取**继承值/初始值**，
     不会回退到前面那条 calc。实测钉钉里 body 字号 15.6px、标题栏 18.3px。

   现在一律写 calc(N * var(--px))。和老站的差别只是不做向下取整，
   实测整页高度差 0~2%，肉眼看不出；而 round() 的代价是整页崩掉。 */
/* ============================================================================
   活动列表 /{lang}/hospital/{数字id}/activityList
   ----------------------------------------------------------------------------
   照搬老站 subPackages_sub/activity/activityList.vue 的 scoped scss。

   ⚠ 尺寸换算：老站是 rpx（750 设计稿），这里 N = rpx / 2，
     再用 round(down, calc(N * var(--px)), 1px) 复刻 uni-app 的向下取整。
     实测对照过老站在 375 下的计算值：27rpx→13px、44rpx→22px、5rpx→2px、26rpx→13px。

   ⚠ 1rpx 的发丝线直接写 1px，**不要**写 round(down, calc(0.5 * var(--px)), 1px)
     —— 那个在 375 下算出来是 0，边框整条消失。老站实测就是 1px。
   ========================================================================== */

.activity-page {
    min-height: 100vh; color: #191724;
    /**
     * ⚠ 跟着全站容器走（app.css 的三档：≤767 满宽 / 768~1024 600px / ≥1025 640px），
     *   **不要**写 width:100vw。
     *
     *   老站这一页实测是视口满宽（1440 视口下 .activity-page 就是 1440），
     *   而 body 被 App.vue 锁在 640 —— 也就是老站在桌面上这一页是**溢出容器、
     *   带横向滚动条**的（1440 下 documentElement.scrollWidth = 1840）。
     *   那是老站的毛病，这里不复刻：SSR 全站统一锁 640。
     */
    width: 100%;
    background:
      radial-gradient(circle at 100% 0, rgba(208,224,255,.42), transparent 36%),
      linear-gradient(180deg, #fff8fb 0, #f7f7fb calc(215 * var(--px)), #f7f7fb 100%);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: calc(27 * var(--px)) calc(18 * var(--px)) calc(21 * var(--px)); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.orb-left  { width: calc(115 * var(--px)); height: calc(115 * var(--px)); left: calc(-45 * var(--px)); top: calc(-50 * var(--px)); background: rgba(255,151,191,.22); }
.orb-right { width: calc(140 * var(--px)); height: calc(140 * var(--px)); right: calc(-45 * var(--px)); top: calc(-40 * var(--px)); background: rgba(139,187,255,.22); }
.brand-row { position: relative; display: flex; align-items: flex-start; width: max-content; }
.brand { color: #f64f8d; font-size: calc(15 * var(--px)); line-height: 1; font-weight: 800; letter-spacing: -0.75px; }
.brand-star { margin: calc(-4.5 * var(--px)) 0 0 calc(2.5 * var(--px)); color: #ff86ae; font-size: calc(9 * var(--px)); }
.hero-title { position: relative; display: block; margin-top: calc(12.5 * var(--px)); font-size: calc(22 * var(--px)); line-height: 1.25; font-weight: 700; letter-spacing: -0.5px; }
.hero-subtitle { position: relative; display: block; margin-top: calc(6.5 * var(--px)); color: #777184; font-size: calc(12 * var(--px)); line-height: 1.55; }
.hero-meta { position: relative; display: flex; align-items: center; margin-top: calc(14 * var(--px)); color: #585361; font-size: calc(10.5 * var(--px)); font-weight: 500; }
.meta-dot { width: calc(5 * var(--px)); height: calc(5 * var(--px)); margin-right: calc(5 * var(--px)); border-radius: 50%; background: #fa5a92; box-shadow: 0 0 0 calc(3 * var(--px)) rgba(250,90,146,.1); }
.meta-line { width: 1px; height: calc(10 * var(--px)); margin: 0 calc(9 * var(--px)); background: #d9d6df; }

/* ---------- 机构切换条 ---------- */
.hospital-sticky { position: sticky; top: 0; z-index: 30; padding: 0 calc(12 * var(--px)); background: rgba(247,247,251,.96); box-shadow: 0 calc(6 * var(--px)) calc(12 * var(--px)) rgba(54,45,68,.04); }
.current-hospital { display: flex; align-items: center; min-height: calc(59 * var(--px)); padding: calc(7.5 * var(--px)) calc(9 * var(--px)); box-sizing: border-box; border: 1px solid rgba(255,255,255,.9); border-radius: calc(13 * var(--px)); background: rgba(255,255,255,.96); box-shadow: 0 calc(5 * var(--px)) calc(16 * var(--px)) rgba(73,60,92,.1); cursor: pointer; }
.current-logo-wrap { display: flex; align-items: center; justify-content: center; width: calc(40 * var(--px)); height: calc(40 * var(--px)); flex: 0 0 calc(40 * var(--px)); overflow: hidden; border-radius: calc(10 * var(--px)); background: linear-gradient(145deg,#fff1f6,#edf4ff); border: 1px solid #f1edf2; }
.current-logo { width: 100%; height: 100%; object-fit: cover; }
.logo-placeholder { color: #f56093; font-size: calc(17 * var(--px)); font-weight: 700; }
.current-copy { min-width: 0; flex: 1; margin-left: calc(9 * var(--px)); }
.current-label { display: block; margin-bottom: calc(3 * var(--px)); color: #a49dab; font-size: calc(9 * var(--px)); line-height: 1.2; letter-spacing: 1px; }
.current-name { display: block; overflow: hidden; color: #201d27; font-size: calc(14 * var(--px)); line-height: 1.35; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.switch-button { display: flex; align-items: center; justify-content: center; height: calc(27 * var(--px)); margin-left: calc(6 * var(--px)); padding: 0 calc(9 * var(--px)); color: #f05188; font-size: calc(10.5 * var(--px)); font-weight: 600; border-radius: calc(14 * var(--px)); background: #fff0f5; white-space: nowrap; }
.chevron { margin-left: calc(3.5 * var(--px)); font-size: calc(12 * var(--px)); transition: transform .2s ease; }
.chevron.open { transform: rotate(180deg); }
.hospital-picker { padding: calc(8 * var(--px)) 0 calc(10 * var(--px)); }
.hospital-scroll { width: 100%; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hospital-scroll::-webkit-scrollbar { display: none; }
.hospital-row { display: inline-flex; padding: 0 1px; }
.hospital-chip { position: relative; display: inline-flex; align-items: center; width: calc(135 * var(--px)); height: calc(42 * var(--px)); margin-right: calc(7 * var(--px)); padding: calc(5 * var(--px)) calc(7 * var(--px)); box-sizing: border-box; border: 1px solid #eeeaf0; border-radius: calc(10 * var(--px)); background: #fff; text-decoration: none; }
.hospital-chip.active { border-color: rgba(247,85,139,.42); background: linear-gradient(135deg,#fff,#fff3f7); }
.chip-logo { display: flex; align-items: center; justify-content: center; width: calc(30 * var(--px)); height: calc(30 * var(--px)); flex: 0 0 calc(30 * var(--px)); border-radius: calc(7.5 * var(--px)); background: #f8f7fa; object-fit: cover; }
.chip-placeholder { color: #f56093; font-size: calc(12 * var(--px)); font-weight: 700; }
.chip-name { min-width: 0; margin-left: calc(6 * var(--px)); overflow: hidden; color: #3d3943; font-size: calc(11 * var(--px)); line-height: 1.3; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.chip-check { position: absolute; right: calc(4 * var(--px)); top: calc(3.5 * var(--px)); display: flex; align-items: center; justify-content: center; width: calc(12.5 * var(--px)); height: calc(12.5 * var(--px)); color: #fff; font-size: calc(8 * var(--px)); border-radius: 50%; background: #f65a90; }

/* ---------- 活动列表 ---------- */
.content { padding: calc(21 * var(--px)) calc(12 * var(--px)) 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 calc(5 * var(--px)) calc(12 * var(--px)); }
.eyebrow { display: block; margin-bottom: calc(4 * var(--px)); color: #f05b90; font-size: calc(8.5 * var(--px)); font-weight: 700; letter-spacing: 1.5px; }
.section-title { display: block; color: #201d27; font-size: calc(17 * var(--px)); font-weight: 700; }
.offer-count { display: flex; align-items: center; justify-content: center; min-width: calc(27 * var(--px)); height: calc(21 * var(--px)); padding: 0 calc(6 * var(--px)); color: #7d7583; font-size: calc(10.5 * var(--px)); border-radius: calc(11 * var(--px)); background: #fff; }
.offer-card { position: relative; display: flex; min-height: calc(105 * var(--px)); margin-bottom: calc(9 * var(--px)); padding: calc(13.5 * var(--px)) calc(12 * var(--px)) calc(12 * var(--px)) calc(11 * var(--px)); overflow: hidden; box-sizing: border-box; border: 1px solid #efecf1; border-radius: calc(14 * var(--px)); background: rgba(255,255,255,.98); box-shadow: 0 calc(4.5 * var(--px)) calc(12.5 * var(--px)) rgba(70,60,83,.055); text-decoration: none; color: inherit; }
.card-accent { position: absolute; left: 0; top: calc(14 * var(--px)); width: calc(2.5 * var(--px)); height: calc(27 * var(--px)); border-radius: 0 calc(2.5 * var(--px)) calc(2.5 * var(--px)) 0; background: linear-gradient(180deg,#fb4f8c,#ff9ab9); }
.offer-index { flex: 0 0 calc(27 * var(--px)); padding-top: 1px; color: #d9a6b7; font-family: Georgia, serif; font-size: calc(12 * var(--px)); font-style: italic; font-weight: 600; }
.offer-main { min-width: 0; flex: 1; }
.offer-title-row { display: flex; align-items: flex-start; }
.offer-title { display: -webkit-box; flex: 1; overflow: hidden; color: #25212a; font-size: calc(14 * var(--px)); line-height: 1.45; font-weight: 650; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.detail-arrow { display: flex; align-items: center; justify-content: center; width: calc(21.5 * var(--px)); height: calc(21.5 * var(--px)); margin-left: calc(6 * var(--px)); flex: 0 0 calc(21.5 * var(--px)); color: #f15a8e; font-size: calc(11 * var(--px)); border-radius: 50%; background: #fff0f5; }
.offer-desc { display: -webkit-box; margin-top: calc(6 * var(--px)); overflow: hidden; color: #8b8490; font-size: calc(10.5 * var(--px)); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gift-row { display: flex; align-items: center; margin-top: calc(6 * var(--px)); }
.gift-label { padding: 1px calc(4.5 * var(--px)); color: #f05c90; font-size: calc(8 * var(--px)); font-weight: 700; letter-spacing: .5px; border-radius: calc(3 * var(--px)); background: #fff0f5; }
.gift-text { margin-left: calc(4.5 * var(--px)); overflow: hidden; color: #7c7480; font-size: calc(10 * var(--px)); text-overflow: ellipsis; white-space: nowrap; }
.offer-footer { display: flex; align-items: flex-end; justify-content: space-between; margin-top: calc(10.5 * var(--px)); padding-top: calc(9 * var(--px)); border-top: 1px solid #f1eef2; }
.price-block { min-width: 0; }
.original-price { display: block; margin-bottom: calc(2 * var(--px)); color: #aaa4ae; font-size: calc(9 * var(--px)); text-decoration: line-through; }
.sale-price-row { display: flex; align-items: baseline; }
.price-label { margin-right: calc(4 * var(--px)); color: #9b929e; font-size: calc(9.5 * var(--px)); }
.sale-price { color: #f04f88; font-size: calc(14.5 * var(--px)); font-weight: 750; }
.booking-block { display: flex; align-items: center; margin-left: calc(6 * var(--px)); }
.sale-count { margin-right: calc(6.5 * var(--px)); color: #a19aa5; font-size: calc(9 * var(--px)); white-space: nowrap; }
.booking-button { display: flex; align-items: center; justify-content: center; height: calc(25 * var(--px)); padding: 0 calc(9 * var(--px)); color: #fff; font-size: calc(10 * var(--px)); font-weight: 600; border-radius: calc(13 * var(--px)); background: linear-gradient(120deg,#ff78a5,#ed4c87); box-shadow: 0 calc(3.5 * var(--px)) calc(7 * var(--px)) rgba(239,77,136,.18); white-space: nowrap; }

/* ---------- 空状态 ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: calc(45 * var(--px)) calc(20 * var(--px)) calc(60 * var(--px)); text-align: center; }
.empty-mark { position: relative; display: flex; align-items: center; justify-content: center; width: calc(55 * var(--px)); height: calc(55 * var(--px)); color: #f25d91; font-size: calc(15.5 * var(--px)); border-radius: 50%; background: linear-gradient(145deg,#fff,#fff0f5); box-shadow: 0 calc(6 * var(--px)) calc(15 * var(--px)) rgba(235,89,140,.13); }
.empty-ring { position: absolute; inset: calc(7 * var(--px)); border: 1px solid rgba(241,91,143,.28); border-radius: 50%; }
.empty-title { margin-top: calc(15 * var(--px)); color: #37313c; font-size: calc(14.5 * var(--px)); font-weight: 650; }
.empty-copy { margin-top: calc(6 * var(--px)); color: #98919c; font-size: calc(11 * var(--px)); line-height: 1.55; }

.safe-bottom { height: calc(calc(20 * var(--px)) + env(safe-area-inset-bottom)); }