/* Monetisation UI — affiliate buttons + ad slots. Themed via the global
   custom props in styles.css (--brand, --line, --muted, --surface, etc.). */

/* --- Affiliate block ------------------------------------------------------ */
.aff-block{
  margin:1.2rem 0;
  padding:1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.aff-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .8rem;
  font-size:.82rem;
  color:var(--muted);
}
.aff-ad-tag{
  flex:0 0 auto;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:4px;
  padding:.05rem .35rem;
}
.aff-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.aff-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  flex:1 1 200px;
  min-width:180px;
  padding:.65rem .9rem;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text);
  font-weight:700;
  transition:.15s;
}
.aff-btn:hover{
  border-color:var(--brand);
  transform:translateY(-2px);
}
.aff-btn-name{font-size:.95rem}
.aff-btn-cta{
  font-size:.85rem;
  color:#06231a;
  background:var(--brand);
  border-radius:6px;
  padding:.3rem .6rem;
  white-space:nowrap;
}
.aff-disclosure{
  margin:.8rem 0 0;
  line-height:1.4;
}
.aff-disclosure a{color:var(--brand)}

/* --- Ad slots ------------------------------------------------------------- */
.ad-wrap{
  position:relative;
  margin:1.2rem 0;
  min-height:90px;
}
.ad-wrap .ad-tag{
  position:absolute;
  top:-.6rem;
  left:.4rem;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  background:var(--bg);
  padding:0 .3rem;
}
.ad-placeholder{
  margin:1.2rem 0;
  padding:.9rem;
  text-align:center;
  font-size:.76rem;
  color:var(--muted);
  border:1px dashed var(--line);
  border-radius:8px;
  background:repeating-linear-gradient(45deg,#12171e,#12171e 10px,#141a22 10px,#141a22 20px);
}