/* ── De gouden knop, stijl C "Schittering" (Frits, 10 nov 2026) ─────────────
   Eén goud voor app en site. Plat goud, en ook het verloop van 9 nov, las nog als
   mosterd. Nu scheert het licht schuin over het goud: een lichte band door het
   midden, donkerder naar de randen, een zacht licht van boven, een lichtrandje
   binnen de bovenrand, een gouden ring en een gouden gloed. Als de pagina opent
   trekt er één keer een glans overheen; nooit in een lus, en niet bij "minder
   beweging". Navy tekst: 6,3 tot 12,1 : 1 waar de tekst staat, nergens onder 5,3.
   Dezelfde waarden als TTTGoudStijl in de app (lib/theme/ttt_tokens.dart).
   Laadt als laatste stylesheet, zodat het de oudere gouden knoppen overschrijft
   (kassa.css, shop.css, variant-v2-extra.css, variant-v4.css, tour-detail-v2.css). */

:root {
  --goud-c-vlak:
    linear-gradient(180deg, rgba(255,250,235,.26) 0%, rgba(255,250,235,0) 46%, rgba(80,56,20,.12) 100%),
    linear-gradient(105deg, #a8884a 0%, #c5a059 22%, #d9bc78 40%, #efd9a2 50%, #d9bc78 60%, #c5a059 78%, #a8884a 100%);
  --goud-c-rand: inset 0 1px 0 rgba(255,244,210,.7), 0 0 0 1px rgba(197,160,89,.6);
  --goud-c-schaduw: 0 1px 2px rgba(60,40,10,.14), 0 6px 22px rgba(197,160,89,.30);
  --goud-c-schaduw-hover: 0 1px 2px rgba(60,40,10,.14), 0 8px 28px rgba(197,160,89,.42);
}

.kassa .kassa-knop:not(.kassa-knop--rand):not(.kassa-knop--licht):not(:disabled),
.v2-btn--solid,
#tour-page .v2-btn--solid,
#tour-page .ovd .v2-btn--solid,
#ttt-direction .ttt-button:not(.ttt-button-zacht) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--goud-c-vlak);
  background-origin: border-box;
  border-color: transparent;
  color: #0d172e;
  box-shadow: var(--goud-c-rand), var(--goud-c-schaduw);
  opacity: 1;
  transition: filter .15s ease, box-shadow .18s ease;
}

.kassa .kassa-knop:not(.kassa-knop--rand):not(.kassa-knop--licht):not(:disabled):hover,
.v2-btn--solid:hover,
#tour-page .v2-btn--solid:hover,
#tour-page .ovd .v2-btn--solid:hover,
#ttt-direction .ttt-button:not(.ttt-button-zacht):hover {
  background: var(--goud-c-vlak);
  background-origin: border-box;
  border-color: transparent;
  color: #0d172e;
  opacity: 1;
  filter: brightness(1.04);
  box-shadow: var(--goud-c-rand), var(--goud-c-schaduw-hover);
}

/* Ingedrukt: iets donkerder in plaats van doorzichtig (in de app: TTTColors.goldPressed). */
.kassa .kassa-knop:not(.kassa-knop--rand):not(.kassa-knop--licht):not(:disabled):active,
.v2-btn--solid:active,
#tour-page .v2-btn--solid:active,
#tour-page .ovd .v2-btn--solid:active,
#ttt-direction .ttt-button:not(.ttt-button-zacht):active {
  filter: brightness(.92);
  opacity: 1;
}

/* De glans: een schuine lichtstreep van 45% van de breedte, 18 graden schuin, één keer. */
.kassa .kassa-knop:not(.kassa-knop--rand):not(.kassa-knop--licht):not(:disabled)::after,
.v2-btn--solid::after,
#ttt-direction .ttt-button:not(.ttt-button-zacht)::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -60%;
  width: 45%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,250,232,0) 0%, rgba(255,250,232,.55) 50%, rgba(255,250,232,0) 100%);
  transform: translateX(0) skewX(-18deg);
  opacity: 0;
  animation: goud-c-glans 1.8s ease-in-out .35s 1 both;
}

@keyframes goud-c-glans {
  0%   { transform: translateX(0) skewX(-18deg);    opacity: 0; }
  12%  { opacity: 1; }
  96%  { transform: translateX(420%) skewX(-18deg); opacity: 1; }
  100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kassa .kassa-knop::after,
  .v2-btn--solid::after,
  #ttt-direction .ttt-button::after { animation: none; opacity: 0; }
}