/* 路径：/static/marketing/front_permission_ui.css
 * 前台权限统一展示样式
 * 目标：
 * 1. 与 front_permission_ui.js 解耦：JS 只管行为，CSS 只管视觉；
 * 2. 统一前台权限徽章 / 提示文案 / 模态框样式；
 * 3. 供顶部导航入口、页面功能入口、页面内按钮等场景复用。
 */

.front-perm-diamond-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  font-weight:700;
  color:#9a6b11;
  background:linear-gradient(180deg, #fff4d6 0%, #ffe6a3 100%);
  border:1px solid #f2cf73;
  box-shadow:0 2px 8px rgba(124, 74, 3, 0.12);
  box-sizing:border-box;
  user-select:none;
}
.front-perm-badge-anchor{
  position:relative;
  --front-perm-badge-offset-top: 12px;
  --front-perm-badge-offset-right: 12px;
}

/* 顶部导航旧锚点：挂在整条链接容器上 */
.front-perm-badge-anchor--nav{
  --front-perm-badge-offset-top: -8px;
  --front-perm-badge-offset-right: -10px;
}

/* 顶部导航文字锚点：挂在文字容器右上角，让徽章贴近标题文字 */
.front-perm-badge-anchor--nav-text{
  --front-perm-badge-offset-top: -8px;
  --front-perm-badge-offset-right: -14px;
}

/* 页面功能卡片：徽章挂在卡片右上角，保持更稳的内边距感 */
.front-perm-badge-anchor--card{
  --front-perm-badge-offset-top: 12px;
  --front-perm-badge-offset-right: 12px;
}

.front-perm-badge-overlay{
  position:absolute;
  top:var(--front-perm-badge-offset-top);
  right:var(--front-perm-badge-offset-right);
  pointer-events:none;
  z-index:2;
}

.front-perm-is-restricted{
  position:relative;
}
.front-perm-hint-block{
  margin-top:4px;
}

.front-perm-hint{
  display:block;
  font-size:12px;
  line-height:1.6;
  margin:0;
}

.front-perm-hint--restricted{
  color:#9a6b11;
  font-weight:600;
}

.front-perm-hint--granted{
  color:#8a8f98;
  font-weight:400;
}

.front-perm-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
}

.front-perm-modal.is-open{
  display:block;
}

.front-perm-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, 0.38);
}

.front-perm-modal__dialog{
  position:relative;
  width:min(520px, 92vw);
  margin:10vh auto 0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 24px 64px rgba(15, 23, 42, 0.22);
  overflow:hidden;
  border:1px solid #e5e7eb;
}

.front-perm-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid #eef2f7;
}

.front-perm-modal__title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#111827;
}

.front-perm-modal__close{
  border:0;
  background:none;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color:#6b7280;
}

.front-perm-modal__body{
  padding:18px;
}

.front-perm-modal__hero{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.front-perm-modal__hero-badge{
  width:40px;
  height:40px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#9a6b11;
  background:linear-gradient(180deg, #fff6df 0%, #ffeab4 100%);
  border:1px solid #f2cf73;
  font-size:18px;
  font-weight:700;
  flex:0 0 auto;
}

.front-perm-modal__desc{
  margin:0;
  color:#475467;
  line-height:1.8;
  font-size:14px;
}

.front-perm-modal__meta{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  color:#667085;
  font-size:13px;
  line-height:1.7;
}

.front-perm-modal__footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 18px 18px;
}

.front-perm-modal__btn{
  min-width:96px;
  height:38px;
  border-radius:10px;
  border:1px solid #d0d5dd;
  background:#fff;
  color:#344054;
  cursor:pointer;
  font-size:14px;
}

.front-perm-modal__btn--primary{
  border-color:#111827;
  background:#111827;
  color:#fff;
}

body.front-perm-modal-open{
  overflow:hidden;
}