/* Change data-control-style in inc/chain.php: gold | studio | colour */
#chain .vc-controls {
  --vc-button: #24334b; --vc-ink: #f5f8ff;
  --vc-main: #ffd33d; --vc-main-ink: #171a21;
  background: transparent; border: 0; padding: 0; margin: 20px 0 16px;
}
#chain .vc-control-row {
  display: grid; grid-template-columns: minmax(44px,1fr) minmax(44px,1fr) minmax(64px,2.25fr) minmax(44px,1fr) minmax(44px,1fr);
  gap: 6px; width: 100%; max-width: 560px; margin: auto;
}
#chain .vc-controls .vc-button {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 52px;
  padding: 8px 4px; margin: 0; border: 2px solid transparent; border-radius: 17px;
  background: var(--vc-button); color: var(--vc-ink); font-family: inherit;
  font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: 0;
  white-space: normal; overflow-wrap: anywhere; text-align: center;
  box-shadow: none; cursor: pointer; touch-action: manipulation;
  transition: filter .15s ease, transform .15s ease;
}
#chain .vc-controls .play-chain { background: var(--vc-main); color: var(--vc-main-ink); }
#chain .vc-controls .vc-button svg { width: 23px; height: 23px; fill: currentColor; flex: none; pointer-events: none; }
#chain .vc-controls .vc-button:hover { filter: brightness(1.12); transform: none; }
#chain .vc-controls .vc-button:active { transform: scale(.96); }
#chain .vc-controls .vc-button:focus-visible { outline: 3px solid var(--we-text, #2196f3); outline-offset: 3px; }
#chain .vc-now-playing { margin: 14px 0 0; font: inherit; font-size: 14px; line-height: 1.5; color: var(--we-text, inherit); overflow-wrap: anywhere; }
#chain .vc-now-playing > span:first-child { opacity: .75; }
#chain .vc-now-playing .now-label { font: inherit; letter-spacing: normal; color: inherit; }
#chain .vc-controls[data-control-style="studio"] { --vc-button: #e5eaf2; --vc-ink: #1a2638; --vc-main: #39b9ff; --vc-main-ink: #071d2b; }
#chain .vc-controls[data-control-style="studio"] .vc-button { border-radius: 999px; }
#chain .vc-controls[data-control-style="colour"] .pause { background: #b8354b; color: #fff; }
#chain .vc-controls[data-control-style="colour"] .play { background: #197443; color: #fff; }
#chain .vc-controls[data-control-style="colour"] .vc-button { border-radius: 14px; }
@media (min-width: 480px) {
  #chain .vc-control-row { gap: 10px; }
  #chain .vc-controls .vc-button { min-height: 58px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { #chain .vc-controls .vc-button { transition: none; } }