/* ══════════════════════════════════════════════════════════════
   商品卡漂浮面板樣式（DREX 學員）
   課程頁右側商品卡：漂浮定位 / 內部捲軸 / 導軌線 / 主卡陰影 / 加購區
   由「頁面 → Style」管理；於 course-page.css 之後載入（蓋過原樣式）
   ══════════════════════════════════════════════════════════════ */

/* ── 2026-07-06: 桌機 DREX 學員價卡跟隨捲動、垂直置中於視窗 ──
   不用 transform 位移（會在未捲動時蓋到 Hero）；top 由 course-page.js
   依卡片實際高度計算置中值，sticky 以右欄為界，上不進 Hero、下不進 Footer */
@media (min-width: 769px) {
  /* 右欄撐滿列高（sticky 需要行程） */
  .course-main__right {
    align-self: stretch;
  }
  /* 漂浮面板：黏在 section-tabs 下方、高度鎖定至視窗底，內部獨立捲動看完所有商品 */
  .pricing-cards.is-drex-student {
    position: sticky;
    top: 150px;                          /* fallback，JS 依 section-tabs 實際位置精算 */
    max-height: calc(100vh - 168px);     /* fallback，JS 精算 */
    overflow-y: auto;
    padding: 0 16px 18px 16px; /* 頂部歸零：捲軸起點對齊主卡頂部 */
    margin-left: -20px;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)) no-repeat right 4px top / 2px 100%;
    background-origin: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(57, 255, 245, 0.6) transparent;
  }
  /* 捲軌 14px、把手實寬 8px（左右透明邊框置中；上下無邊框頂到頂底到底不露線） */
  .pricing-cards.is-drex-student::-webkit-scrollbar { width: 14px; }
  .pricing-cards.is-drex-student::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 245, 0.5);
    background-clip: content-box;
    border: 0 solid transparent;
    border-left-width: 3px;
    border-right-width: 3px;
    border-radius: 5px;
    min-height: 50px;
  }
  .pricing-cards.is-drex-student::-webkit-scrollbar-track { background: transparent; }
  /* 主卡陰影縮小到留白範圍內（僅漂浮面板內），避免被 overflow 裁切 */
  .pricing-cards.is-drex-student .pricing-card.pricing-card--main {
    box-shadow: 0 8px 12px -2px rgba(57, 255, 245, 0.24), 0 0 0 1px rgba(57, 255, 245, 0.15) inset; /* 往下暈為主，上緣不被裁 */
  }
}

/* ── 2026-07-07: 加購區移除底色、加購卡與主商品卡同比例 ── */
.pricing-cards__addon-section {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.pricing-cards__addon-section .pricing-card--addon {
  width: 100%;
}