/* Glas-Bender Visuals · hoofdsite beta (gb-visuals.nl/beta)
   Nieuwe huisstijl bovenop de bestaande site, gelijk aan albums/events-beta:
   12px afronding overal, geen pillen, geen accentkleur, altijd donkere bovenbalk.
   Alleen geladen via /beta (zie serveIndex in server.express.js); de live site blijft ongemoeid. */

html.gbv-beta {
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-pill: 12px;
}

/* ---------- bovenbalk: altijd donker, 56px, glas ---------- */
html.gbv-beta header {
  --paper:#000; --white:#1b1a18;
  --gray-100:#232220; --gray-150:#2c2a27; --gray-200:#2c2a27; --gray-300:#3f3c37; --gray-500:#a6a29a;
  --text-strong:#f4f2ee; --text-body:#dedad3; --text-muted:#a6a29a; --text-on-ink:#f4f2ee;
  --border-default:#2c2a27; --border-strong:#4b4740;
  --fill-strong:#f4f2ee; --fill-strong-hover:#ffffff; --on-fill-strong:#121110;
  --ink-900:#f4f2ee; --ink-800:#e6e3dd; --ink-700:#d3cfc6;
  background: rgba(0,0,0,.86) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #2c2a27 !important;
  color: #f4f2ee;
}
html.gbv-beta header nav.gbv-nav { height: 72px !important; gap: 20px !important; max-width: none !important; padding-left: 24px !important; padding-right: 24px !important; }
html.gbv-beta header img[data-logo="navlight"] { display: none !important; }
html.gbv-beta header img[data-logo="navdark"]  { display: block !important; height: 56px !important; width: auto !important; max-width: 300px !important; }
html.gbv-beta header [data-mobilebtn] { border-radius: 12px !important; }

/* menu: geen pil-balk meer, losse items met 12px-glijder */
html.gbv-beta .gbv-navpill {
  padding: 0 !important; border: 0 !important; background: transparent !important;
  border-radius: 12px !important; gap: 2px !important;
}
html.gbv-beta .gbv-navpill > a { height: 36px !important; border-radius: 12px !important; padding: 0 12px !important; }
html.gbv-beta .gbv-navpill > .glide,
html.gbv-beta .gbv-pillrow > .glide {
  border-radius: 12px !important; box-shadow: none !important;
}
html.gbv-beta [data-navlinks] [data-action="book"],
html.gbv-beta [data-navlinks] [data-action="book"] button { height: 36px !important; }

/* ---------- alle pillen → 12px ---------- */
html.gbv-beta [style*="border-radius: 999px"],
html.gbv-beta [style*="border-radius:999px"],
html.gbv-beta [style*="border-radius: 99px"],
html.gbv-beta [style*="border-radius: 100px"] { border-radius: 12px !important; }
html.gbv-beta .gbv-btn,
html.gbv-beta .gbv-field__input, html.gbv-beta .gbv-sel__input,
html.gbv-beta .gbv-iconbtn, html.gbv-beta .gbv-price,
html.gbv-beta .gbv-price__cta { border-radius: 12px; }
html.gbv-beta .gbv-badge { border-radius: 6px; }
html.gbv-beta .gbv-navpill > .glide { border-radius: 12px !important; }
html.gbv-beta image-slot { border-radius: 12px; }

/* cookiebanner en popups in dezelfde afronding */
html.gbv-beta #gbv-cc { border-radius: 12px !important; }
html.gbv-beta #gbv-cc button { border-radius: 12px !important; }
html.gbv-beta input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.gbv-beta select, html.gbv-beta textarea { border-radius: 12px; }
html.gbv-beta button:not([style*="border-radius"]), html.gbv-beta [role="tab"] { border-radius: 12px; }

/* ---------- kleine/afwijkende inline-afrondingen (kaarten, reviews, formulieren) -> 12px ---------- */
html.gbv-beta [style*="border-radius: 1px"],
html.gbv-beta [style*="border-radius:1px"],
html.gbv-beta [style*="border-radius: 2px"],
html.gbv-beta [style*="border-radius:2px"],
html.gbv-beta [style*="border-radius: 3px"],
html.gbv-beta [style*="border-radius:3px"],
html.gbv-beta [style*="border-radius: 4px"],
html.gbv-beta [style*="border-radius:4px"],
html.gbv-beta [style*="border-radius: 5px"],
html.gbv-beta [style*="border-radius:5px"],
html.gbv-beta [style*="border-radius: 6px"],
html.gbv-beta [style*="border-radius:6px"],
html.gbv-beta [style*="border-radius: 7px"],
html.gbv-beta [style*="border-radius:7px"],
html.gbv-beta [style*="border-radius: 8px"],
html.gbv-beta [style*="border-radius:8px"],
html.gbv-beta [style*="border-radius: 9px"],
html.gbv-beta [style*="border-radius:9px"],
html.gbv-beta [style*="border-radius: 10px"],
html.gbv-beta [style*="border-radius:10px"],
html.gbv-beta [style*="border-radius: 14px"],
html.gbv-beta [style*="border-radius:14px"],
html.gbv-beta [style*="border-radius: 16px"],
html.gbv-beta [style*="border-radius:16px"],
html.gbv-beta [style*="border-radius: 18px"],
html.gbv-beta [style*="border-radius:18px"],
html.gbv-beta [style*="border-radius: 20px"],
html.gbv-beta [style*="border-radius:20px"],
html.gbv-beta [style*="border-radius: 24px"],
html.gbv-beta [style*="border-radius:24px"] { border-radius: 12px !important; }
html.gbv-beta figure, html.gbv-beta blockquote { border-radius: 12px; }

/* logo exact als albums-beta (24px vanaf links, 44px hoog, balk 72px); tabbalk in het midden */
html.gbv-beta header .gbv-nav-logo-link { margin-right: 0 !important; }
html.gbv-beta header .gbv-navpill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 900px) {
  html.gbv-beta header nav.gbv-nav { padding-left: 16px !important; padding-right: 16px !important; }
  html.gbv-beta header img[data-logo="navdark"] { height: 44px !important; }
}
@media (max-width: 1279px) {
  html.gbv-beta header .gbv-navpill { position: relative; left: auto; top: auto; transform: none; }   /* relative (niet static): de glijdende pil positioneert zich ten opzichte van de tabbalk */
}

/* afbeeldingsvlakken (fotoslots, kaarten met beeldverhouding) altijd 12px */
html.gbv-beta [style*="aspect-ratio"][style*="overflow"],
html.gbv-beta [style*="aspect-ratio"][style*="overflow"] > img,
html.gbv-beta image-slot, html.gbv-beta image-slot img { border-radius: 12px !important; overflow: hidden; }

/* hero-knoppen (homepage) beter leesbaar */
html.gbv-beta .gbv-hero-btns .gbv-btn--inverse { background: #fff !important; color: #0a0a0a !important; border-color: #fff !important; }
html.gbv-beta .gbv-hero-btns .gbv-btn--inverse:hover { background: #ebe9e4 !important; }
html.gbv-beta .gbv-hero-btns .gbv-btn--ghost { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.85) !important; }
html.gbv-beta .gbv-hero-btns .gbv-btn--ghost:hover { background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a !important; }

/* ghost-knoppen met witte tekst (donkere secties): bij hover zwart met witte tekst, altijd leesbaar */
html.gbv-beta .gbv-btn--ghost[style*="color: rgb(255, 255, 255)"]:hover,
html.gbv-beta .gbv-btn--ghost[style*="color:#fff"]:hover { background: #0a0a0a !important; color: #fff !important; border-color: #0a0a0a !important; }
/* inverse-knoppen (op donkere vlakken, bv. de afsluitende call-to-action) ook wit met zwarte tekst */
html.gbv-beta section .gbv-btn--inverse { background: #fff !important; color: #0a0a0a !important; border-color: #fff !important; }
html.gbv-beta section .gbv-btn--inverse:hover { background: #ebe9e4 !important; }