/* TCG Standhouders Addon — Pills (match TCG Beurs style) */
.tcg-pills{
  --tcg-pill-accent: #f3a30b;   /* amber */
  --tcg-pill-border: rgba(15,22,36,.14);
  --tcg-pill-bg: rgba(243,163,11,.10);
  --tcg-pill-text: rgba(15,22,36,.88);
  --tcg-pill-shadow: 0 10px 24px rgba(0,0,0,.08);
  font-family: inherit;
}

.tcg-pills__title{
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 10px;
  color: rgba(15,22,36,.92);
}

.tcg-pills__list{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tcg-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--tcg-pill-border);
  background: var(--tcg-pill-bg);
  color: var(--tcg-pill-text);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space: nowrap;
}

.tcg-pill--link:hover{
  transform: translateY(-1px);
  box-shadow: var(--tcg-pill-shadow);
  background: rgba(243,163,11,.14);
  border-color: rgba(243,163,11,.35);
}

/* Dark sections support (add class 'is-dark' on parent container if needed) */
.tcg-pills.is-dark,
.is-dark .tcg-pills{
  --tcg-pill-border: rgba(255,255,255,.14);
  --tcg-pill-bg: rgba(255,255,255,.06);
  --tcg-pill-text: rgba(255,255,255,.88);
}
.is-dark .tcg-pills__title{ color: rgba(255,255,255,.92); }

@media (max-width: 767px){
  .tcg-pills__list{ gap: 8px; }
  .tcg-pill{ padding: 9px 12px; font-size: 14px; }
}


/* ===== Logo ===== */
.tcg-standhouder-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tcg-standhouder-logo__img{
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.tcg-standhouder-logo--link{
  text-decoration:none !important;
}

/* ===== Social buttons ===== */
.tcg-socials{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
}
.tcg-socialbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration:none !important;
  color: rgba(15,22,36,.95) !important;
  background: linear-gradient(180deg, #ffcc4d, #f3a30b);
  box-shadow: 0 14px 30px rgba(243,163,11,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  min-width: 140px;
}
.tcg-socialbtn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 36px rgba(243,163,11,.26);
}
/* Instagram variant: subtle dark outline to differentiate, still on-brand */
.tcg-socialbtn--ig{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color: rgba(15,22,36,.92) !important;
  border: 1px solid rgba(15,22,36,.14);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
.tcg-socialbtn--ig:hover{
  background: linear-gradient(180deg, rgba(243,163,11,.14), rgba(243,163,11,.08));
  border-color: rgba(243,163,11,.35);
}
@media (max-width: 767px){
  .tcg-socialbtn{ width: 100%; min-width: 0; }
}