.ofc-root { position: fixed; z-index: 2147483000; bottom: 20px; }
.ofc-btn {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:9999px;
  background: var(--ofc-primary, #10b981); color: var(--ofc-text, #fff);
  box-shadow: 0 10px 20px rgba(0,0,0,.18), 0 6px 6px rgba(0,0,0,.12);
  cursor:pointer; position:relative; border:none; line-height:1;
  font-size: 22px;
}
.ofc-btn::after { content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow: 0 0 0 0 rgba(16,185,129,.45); animation: ofc-pulse 2.2s ease-out infinite; }
@keyframes ofc-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,.15);} 70% { box-shadow: 0 0 0 18px rgba(0,0,0,0);} 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0);} }
.ofc-btn.has-img { background-repeat: no-repeat; background-position: center; background-size: 52%; font-size: 0; }
.ofc-card {
  position:absolute; bottom: 68px;
  background:#fff; color:#111; min-width:260px; max-width:min(92vw,360px);
  border-radius:16px; padding:14px; box-shadow: 0 16px 40px rgba(0,0,0,.18);
  opacity:0; transform: translateY(6px); pointer-events:none; transition: all .25s ease;
  will-change: transform; contain: layout paint;
}
.ofc-card.show { opacity:1; transform: translateY(0); pointer-events:auto; }
.ofc-card h4 { margin:0 0 10px; font-size:15px; font-weight:700; }
.ofc-row { display:flex; gap:8px; }
.ofc-row a { flex:1; text-align:center; text-decoration:none; padding:10px 12px; border-radius:12px;
  background:#f3f4f6; color:#111; font-weight:600; font-size:14px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.ofc-row a.primary { background: var(--ofc-primary, #10b981); color: var(--ofc-text, #fff); }
.ofc-close { position:absolute; inset-inline-end:6px; inset-block-start:6px; width:28px; height:28px; border:none; background:transparent; cursor:pointer; font-size:18px; line-height:1; color:#777;}
@media (prefers-reduced-motion: reduce) {
  .ofc-btn::after { animation: none; }
  .ofc-card { transition: none; }
}