@import url("portal.css");

/* 页面宽度更像原站那种大留白 */
.redeem-wrap{
  width: min(980px, calc(100% - 64px));
}

.redeem-title{
  margin: 34px 0 18px;
  font-size: 36px;
  font-weight: 950;
  letter-spacing: -.4px;
  color:#121212;
}

/* 顶部 points 卡 */
.points-hero{
  padding: 18px 18px 16px;
  border-radius: 12px;
}

.points-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 18px;
}

.opt-brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.opt-logo{
  width:34px; height:34px;
  border-radius:6px;
  background:#c9131b;
  position:relative;
}
.opt-logo::after{
  content:"";
  position:absolute;
  left:9px; top:9px;
  width:16px; height:16px;
  border-radius:4px;
  background:#fff;
  transform:skewX(-8deg) rotate(10deg);
}
.opt-text{
  font-weight: 900;
  color:#2a2a2a;
}

.bubble-icon{
  width:44px; height:44px;
  border-radius: 999px;
  background: var(--purple-soft);
  border:1px solid rgba(91,42,120,.10);
  display:grid;
  place-items:center;
  text-decoration:none;
}
.bubble-icon__mark{
  width:16px; height:12px;
  border:2px solid rgba(91,42,120,.55);
  border-radius:4px;
  position:relative;
}
.bubble-icon__mark::after{
  content:"";
  position:absolute;
  left:3px; bottom:-5px;
  width:8px; height:8px;
  background: var(--purple-soft);
  border-left:2px solid rgba(91,42,120,.55);
  border-bottom:2px solid rgba(91,42,120,.55);
  transform:rotate(45deg);
}

.points-hero__main{
  padding: 4px 6px 6px;
}

.points-big{
  font-size: 40px;
  font-weight: 950;
  letter-spacing: -.6px;
  color:#121212;
  margin-bottom: 4px;
}
.points-big .pts{
  font-size: 18px;
  font-weight: 850;
  color:#4a4a4a;
}
.points-sub{
  color:#6b6b6b;
  font-weight: 650;
  margin-bottom: 18px;
}

/* Refer a friend 条 */
.refer{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 14px;
  border-radius: 10px;
  background:#f6f6f7;
  border:1px solid #ededf0;
  color: var(--purple-2);
  text-decoration:none;
  font-weight: 850;
}
.refer:hover{ background:#f2f2f4; }

.gift{
  width:16px;height:16px;
  border-radius:4px;
  border:2px solid rgba(91,42,120,.50);
  position:relative;
}
.gift::before{
  content:"";
  position:absolute;
  left:-2px; right:-2px; top:6px;
  height:2px;
  background: rgba(91,42,120,.40);
}
.gift::after{
  content:"";
  position:absolute;
  left:7px; top:-2px; bottom:-2px;
  width:2px;
  background: rgba(91,42,120,.40);
}

/* Offers 区 */
.offers{
  margin-top: 26px;
}
.offers__title{
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -.3px;
  color:#121212;
  display:flex;
  align-items:center;
  gap:10px;
}
.lock{
  font-size: 18px;
  transform: translateY(-1px);
}

.offer-card{
  padding: 26px 26px;
  border-radius: 12px;
}
.offer-inner{
  background:#f6f6f7;
  border:1px solid #ededf0;
  border-radius: 12px;
  padding: 22px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.offer-text{
  margin:0;
  color:#2a2a2a;
  font-weight: 650;
  max-width: 560px;
  line-height: 1.35;
}

.offer-btn{
  white-space: nowrap;
  padding: 12px 22px;
}

/* responsive */
@media (max-width: 860px){
  .redeem-wrap{ width: calc(100% - 24px); }
  .redeem-title{ font-size: 28px; }
  .offer-inner{ flex-direction: column; align-items:flex-start; }
}