/* Advanced Coupon Box v1.3 */
.acb-box{
  --acb-bg:#ffffff;
  --acb-fg:#111827;
  --acb-border:#e5e7eb;
  --acb-muted:#6b7280;
  --acb-accent:#4f46e5;
  --acb-badge-bg:#111827;
  --acb-badge-big-color:#ffffff;
  --acb-badge-small-color:#e5e7eb;
  --acb-badge-big-size:1.6rem;
  --acb-badge-small-size:.8rem;

  border:1px solid var(--acb-border);
  background:var(--acb-bg);
  color:var(--acb-fg);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  max-width:820px;

  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:stretch;
  font-family: var(--acb-font-content, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial);
}
.acb-theme-dark{
  --acb-bg:#0b1020;
  --acb-fg:#e5e7eb;
  --acb-border:#1f2937;
  --acb-muted:#9ca3af;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Left badge: big first, then small, centered */
.acb-badge{
  background:var(--acb-badge-bg);
  background-image: var(--acb-badge-gradient, none);
  border-radius:12px;
  padding:14px 16px;
  min-width:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-family: var(--acb-font-badge, var(--acb-font-content, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial));
}
.acb-badge-big{
  color:var(--acb-badge-big-color);
  font-weight:800;
  font-size:var(--acb-badge-big-size);
  line-height:1.1;
}
.acb-badge-small{
  color:var(--acb-badge-small-color);
  font-size:var(--acb-badge-small-size);
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.95;
}

.acb-content{ display:grid; gap:8px; }
.acb-head{ display:flex; align-items:center; justify-content:space-between; }
.acb-name{ font-weight:700; font-size:1.125rem; letter-spacing:.2px; }
.acb-desc{ color:var(--acb-muted); font-size:.95rem; line-height:1.4; }
.acb-body{ display:grid; gap:10px; }
.acb-code-wrap{
  display:flex; align-items:center; gap:10px;
  border:1px dashed var(--acb-accent);
  background: color-mix(in oklab, var(--acb-accent) 10%, transparent);
  padding:10px 12px; border-radius:12px;
}
.acb-theme-dark .acb-code-wrap{ background: color-mix(in oklab, var(--acb-accent) 20%, transparent); }
.acb-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
  font-size:.95rem; user-select: all;
}
.acb-copy-btn, .acb-reveal-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--acb-border); background:var(--acb-bg); color:var(--acb-fg);
  border-radius:999px; padding:8px 12px; cursor:pointer;
  transition: transform .05s ease, box-shadow .2s ease;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.acb-copy-btn:focus,.acb-reveal-btn:focus{ outline:2px solid var(--acb-accent); outline-offset: 2px; }
.acb-copy-btn:hover,.acb-reveal-btn:hover{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
.acb-copy-icon{ display:inline-flex; width:20px; height:20px; }
.acb-copy-label{ font-weight:600; font-size:.9rem; }
.acb-expiry{ color:var(--acb-muted); font-size:.9rem; }

/* Variants */
.acb-variant-minimal{ box-shadow:none; border-radius:12px; }
.acb-variant-minimal .acb-code-wrap{ border-style:solid; background:transparent; }
.acb-variant-badge{ border-style:dashed; background: color-mix(in oklab, var(--acb-accent) 6%, #fff); }
.acb-theme-dark.acb-variant-badge{ background: color-mix(in oklab, var(--acb-accent) 12%, #0b1020); }

@media (max-width:640px){
  .acb-box{ grid-template-columns:1fr; }
  .acb-badge{ min-height:72px; }
}