/* ============================================
   Paywall Page — 订阅 & 金币充值页
   对标设计稿：全屏黑底 + Membership 卡片 + Coins 2x2 网格
   ============================================ */

/* ---- 全屏页面容器 ---- */
#paywall-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-paywall, 50);
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#paywall-page.hidden {
  display: none;
}

/* ---- 导航栏（与 Player/Profile 一致） ---- */
.pw-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height, 48px);
  padding: 0 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.pw-back-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pw-nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.pw-nav-spacer {
  width: 36px;
}

/* ---- 滚动内容区 ---- */
.pw-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
  scrollbar-width: none;
}

.pw-body::-webkit-scrollbar { display: none; }

/* ---- Section 区域 ---- */
.pw-section {
  margin-bottom: 32px;
}

.pw-section--coins {
  margin-bottom: 0;
}

/* Crown + 标题行 */
.pw-section-header,
.pw-coins-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pw-crown-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.pw-coin-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.pw-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

/* 副标题说明 */
.pw-section-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
  line-height: 1.4;
}

/* ============================================
   订阅计划卡片
   Weekly Plan: 白色边框（选中）
   Monthly: 无边框（未选中）
   ============================================ */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card {
  width: 100%;
  background: rgba(155, 135, 96, 0.38);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
  text-align: left;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.plan-card:active {
  transform: scale(0.98);
}

/* 选中状态：金色半透明背景 + 加粗边框 */
.plan-card--selected {
  background: rgba(155, 135, 96, 0.38);
  border-color: rgba(255,255,255,0.7);
  border-width: 3px;
}

.plan-name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}

.plan-price {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.plan-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
  margin-top: 2px;
}

/* ============================================
   金币充值网格 2x2
   ============================================ */
.coins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.coin-card {
  background: #2B2D3C;
  border-radius: 14px;
  padding: 18px 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: hidden;
}

.coin-card:active {
  transform: scale(0.95);
  background: #35363F;
}

/* 金币数量行 */
.coin-amount-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.coin-coin-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,200,0,0.4));
}

.coin-amount {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

/* 底部 Beans 价格条 */
.coin-beans-bar {
  width: calc(100% + 24px);
  margin-left: -12px;
  margin-right: -12px;
  background: #636363;
  padding: 4px 0 6px;
  text-align: center;
  margin-top: 10px;
  border-radius: 0 0 14px 14px;
  flex-shrink: 0;
}

.coin-beans-text {
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
}