/* =========================================================
   印章徽章（推荐详情页「推荐方案」卡片右上角浮动层）
   用法：
     <div class="stamp-badge stamp-badge--red">
       <div class="face"><span>红</span></div>
     </div>
   主题：--red 主推命中（中） / --gray 未命中（黑） / --draw 走水（走）
   ========================================================= */

/* ========== 印章徽章：公共骨架 ========== */
.stamp-badge {
  position: relative;
  width: 96px;          /* 整体占位（含波浪边） */
  height: 96px;
}

/* 主题变量：--main 描边色，--fill 内部填充色 */
.stamp-badge--red  { --main: #e0473d; --fill: #fff; }
.stamp-badge--gray { --main: #9c9c9c; --fill: #fff; }
/* 走水：淡蓝色（原 #6b7280 灰） */
.stamp-badge--draw { --main: #5b9bd5; --fill: #fff; }

/* 1. 外轮廓：主色圆盘（半径 42） */
.stamp-badge::before {
  content: "";
  position: absolute;
  inset: 6px;                       /* 96 - 12 = 84px，半径 42 */
  border-radius: 50%;
  background: var(--main);
  z-index: 0;
}

/* 2. 外轮廓的波浪凸起：凸起中心落在半径 40 的圆环上 */
.stamp-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--main);
  transform: translate(-50%, -50%);
  z-index: 0;
  box-shadow:
     40px   0px     var(--main),
     38px   12.4px  var(--main),
     32.4px 23.5px  var(--main),
     23.5px 32.4px  var(--main),
     12.4px 38px    var(--main),
      0px   40px    var(--main),
    -12.4px 38px    var(--main),
    -23.5px 32.4px  var(--main),
    -32.4px 23.5px  var(--main),
    -38px   12.4px  var(--main),
    -40px   0px     var(--main),
    -38px  -12.4px  var(--main),
    -32.4px -23.5px var(--main),
    -23.5px -32.4px var(--main),
    -12.4px -38px   var(--main),
      0px  -40px    var(--main),
     12.4px -38px    var(--main),
     23.5px -32.4px  var(--main),
     32.4px -23.5px  var(--main),
     38px  -12.4px   var(--main);
}

/* 3. 内轮廓：填充色圆盘（半径 40），只比外轮廓小 2px */
.stamp-badge .face {
  position: absolute;
  inset: 8px;                       /* 96 - 16 = 80px，半径 40 */
  border-radius: 50%;
  background: var(--fill);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* 4. 内轮廓的波浪凸起（比外凸起内缩 2px），保证描边均匀 2px */
.stamp-badge .face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fill);
  transform: translate(-50%, -50%);
  z-index: -1;                      /* 压到文字下方，避免中心出现填充色圆点 */
  box-shadow:
     38px   0px     var(--fill),
     36.1px 11.7px  var(--fill),
     30.7px 22.3px  var(--fill),
     22.3px 30.7px  var(--fill),
     11.7px 36.1px  var(--fill),
      0px   38px    var(--fill),
    -11.7px 36.1px  var(--fill),
    -22.3px 30.7px  var(--fill),
    -30.7px 22.3px  var(--fill),
    -36.1px 11.7px  var(--fill),
    -38px   0px     var(--fill),
    -36.1px -11.7px var(--fill),
    -30.7px -22.3px var(--fill),
    -22.3px -30.7px var(--fill),
    -11.7px -36.1px var(--fill),
      0px  -38px    var(--fill),
     11.7px -36.1px var(--fill),
     22.3px -30.7px var(--fill),
     30.7px -22.3px var(--fill),
     36.1px -11.7px var(--fill);
}

/* 5. 内圈虚线圆 */
.stamp-badge .face::before {
  content: "";
  position: absolute;
  inset: 8px;                       /* 直径 64px */
  border-radius: 50%;
  border: 1.5px dashed var(--main);
}

/* 6. 中间的字 */
.stamp-badge .face span {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 700;
  color: var(--main);
  transform: rotate(-8deg);
  line-height: 1;
  user-select: none;
}

/* ========== 页面适配：推荐方案卡片右上角浮动层 ==========
   父级 .rd-rec-list 需为 position: relative（见 recommend.css） */
.rd-rec-stamp {
  position: absolute;
  top: -18px;
  right: -10px;
  z-index: 5;
  opacity: .8;                      /* 印章整体 80% 不透明度 */
  pointer-events: none;             /* 纯展示，不挡卡片交互 */
  transform: rotate(-6deg);         /* 印章轻微歪斜，更像盖章 */
}

@media (max-width: 768px) {
  .rd-rec-stamp {
    top: -20px;
    right: -8px;
    transform: rotate(-6deg) scale(.8);
    transform-origin: top right;
  }
}