/*! Nacht 1.4.0 — ontwerpsysteem van Smarttoolz. Gegenereerd door scripts/build-dist.mjs; niet met de hand wijzigen. */
:root {
  --night-bg: #1c1a17;
  --night-card: #272420;
  --night-card-hover: #2e2a25;
  --night-line: #3f3b35;
  --night-field: #2f2b26;
  --night-field-line: #8a8174;
  --night-ink: #f4eee4;
  --night-muted: #bdb4a6;
  --night-amber: #f2a33a;
  --night-on-amber: #1c1a17;
  --night-green: #3f6b3f;
  --night-green-hover: #355b35;
  --night-on-green: #fff;
  --night-soft: #a8c59a;
  --night-danger: #ff8a73;
  --night-paper: #f2ead9;
  --night-paper-ink: #1d1a16;
  --night-paper-muted: #5d554a;
  --night-paper-line: #d8ccb4;
  --night-pill-review-bg: #f7c96a;
  --night-pill-review-ink: #3b2900;
  --night-pill-change-bg: #f7d3c9;
  --night-pill-change-ink: #9b2a13;
  --night-pill-ok-bg: #d3e5c8;
  --night-pill-ok-ink: #24461f;
  --tool-social: #ed93a1;
  --tool-social-on-paper: #974555;
  --tool-blog: #ef9687;
  --tool-blog-on-paper: #98483c;
  --tool-translate: #e99c70;
  --tool-translate-on-paper: #944e21;
  --tool-planner: #ccae59;
  --tool-planner-on-paper: #7a6001;
  --tool-clock: #b5b761;
  --tool-clock-on-paper: #676803;
  --tool-haccp: #9abf73;
  --tool-haccp-on-paper: #4e6f24;
  --tool-cashbook: #7cc58c;
  --tool-cashbook-on-paper: #2b7440;
  --tool-ads: #5fc8a6;
  --tool-ads-on-paper: #04755b;
  --tool-pos: #49c7c0;
  --tool-pos-on-paper: #02736e;
  --tool-seo: #49c4d8;
  --tool-seo-on-paper: #02707e;
  --tool-quote: #5dbee9;
  --tool-quote-on-paper: #066d90;
  --tool-book: #79b6f4;
  --tool-book-on-paper: #2a669f;
  --tool-chat: #96aef7;
  --tool-chat-on-paper: #4b5ea2;
  --tool-tips: #b0a5f2;
  --tool-tips-on-paper: #63579d;
  --tool-sitebuild: #c79de6;
  --tool-sitebuild-on-paper: #765092;
  --tool-menu: #d997d2;
  --tool-menu-on-paper: #864a81;
  --tool-aisearch: #e694bb;
  --tool-aisearch-on-paper: #90466c;
  --tool-brochure: #dea45f;
  --tool-brochure-on-paper: #8a5601;
  --night-font-serif: "Source Serif 4 Variable", "Noto Sans Arabic", "Noto Sans SC", Georgia, "Times New Roman", serif;
  --night-font-sans: "Atkinson Hyperlegible", "Noto Sans Arabic", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
}

.theme-night, [data-theme="night"] {
  --brand-background: var(--night-bg);
  --brand-surface: var(--night-card);
  --brand-line: var(--night-line);
  --brand-ink: var(--night-ink);
  --brand-muted: var(--night-muted);
  --brand-primary: var(--night-green);
  --brand-primary-hover: var(--night-green-hover);
  --brand-on-primary: #fff;
  --brand-attention: var(--night-amber);
  --brand-on-attention: var(--night-on-amber);
  --brand-danger: var(--night-danger);
  --brand-danger-text: var(--night-danger);
  --brand-paper: var(--night-paper);
  --brand-danger-strong: #a83a28;
  --pal-stone-50: #23201c;
  --pal-stone-100: #34302a;
  --pal-stone-200: var(--night-line);
  --pal-stone-300: var(--night-field-line);
  --pal-stone-400: #a39a8c;
  --pal-stone-500: #b3aa9c;
  --pal-stone-600: var(--night-muted);
  --pal-stone-700: #ddd5c8;
  --pal-stone-800: #ece5d9;
  --pal-stone-900: var(--night-ink);
  --pal-amber-50: #26301f;
  --pal-amber-100: #2f3d28;
  --pal-amber-200: #44583a;
  --pal-amber-300: #6f9163;
  --pal-amber-400: #8fb181;
  --pal-amber-500: var(--night-soft);
  --pal-amber-600: var(--night-green);
  --pal-amber-700: var(--night-amber);
  --pal-amber-800: #f6c06e;
  --pal-amber-900: #e9f0e2;
  --pal-amber-950: var(--night-ink);
  --pal-red-50: #3a201b;
  --pal-red-100: #4b2820;
  --pal-red-200: #6e3a2e;
  --pal-red-300: #a3584a;
  --pal-red-400: var(--night-danger);
  --pal-red-500: var(--night-danger);
  --pal-red-600: #ff9c87;
  --pal-red-700: var(--night-danger);
  --pal-red-800: #ffb3a3;
  --pal-red-900: #ffd2c7;
  --pal-emerald-50: #1e2c22;
  --pal-emerald-100: #263a2c;
  --pal-emerald-200: #355a42;
  --pal-emerald-300: #8be0c4;
  --pal-emerald-400: #6fcf9f;
  --pal-emerald-500: #5cc392;
  --pal-emerald-600: #7fd4a8;
  --pal-emerald-700: #9fdcbb;
  --pal-emerald-800: #bde8cf;
  --pal-emerald-900: #0b3a2c;
  --pal-green-50: #1e2c22;
  --pal-green-100: #263a2c;
  --pal-green-500: #5cc392;
  --pal-green-600: #7fd4a8;
  --pal-green-700: #9fdcbb;
  --pal-green-800: #bde8cf;
  --pal-green-900: #d6f0e0;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background-color: var(--night-bg);
  color: var(--night-ink);
  font-family: var(--night-font-sans);
}

:is(.theme-night, [data-theme="night"]) h1, :is(.theme-night, [data-theme="night"]) h2, :is(.theme-night, [data-theme="night"]) h3, :is(.theme-night, [data-theme="night"]) .font-display {
  font-family: var(--night-font-serif);
  letter-spacing: -.005em;
  font-weight: 700;
}

:is(.theme-night, [data-theme="night"]) :focus-visible {
  outline: 3px solid var(--night-amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-night *, .theme-night :before, .theme-night :after, [data-theme="night"] *, [data-theme="night"] :before, [data-theme="night"] :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.ds-label {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1rem;
}

.ds-card {
  background-color: var(--night-card);
  border: 1px solid var(--night-line);
  border-radius: 14px;
  transition: background-color .15s ease-out, border-color .15s ease-out;
}

.ds-card:hover {
  background-color: var(--night-card-hover);
  border-color: var(--night-field-line);
}

.ds-rail {
  background: repeating-linear-gradient(90deg, #ffffff05 0 1px, #00000006 1px 3px), linear-gradient(100deg, #0000 0 14%, #ffffff73 20%, #0000 27% 58%, #ffffff8c 64%, #0000 71%), linear-gradient(#eeebe6 0%, #bdb8b0 20%, #827d75 46%, #8e8981 58%, #f6f4f0 67%, #a39e96 74%, #57524c 100%);
  border-radius: 6px;
  height: 22px;
  position: relative;
  box-shadow: 0 6px 10px #00000073, inset 0 1px #ffffffbf, inset 0 -1px #00000080;
}

.ds-rail:before, .ds-rail:after {
  content: "";
  background: linear-gradient(90deg, #0000 36%, #fffc 45%, #fff 47.5%, #fffc 50%, #0000 59%), linear-gradient(90deg, #00000059, #0000 30% 70%, #00000059), linear-gradient(#eeebe6 0%, #aaa59d 50%, #55504a 100%);
  border-radius: 5px;
  width: 14px;
  height: 30px;
  position: absolute;
  top: -4px;
  box-shadow: 0 3px 6px #00000080, inset 0 1px #ffffffb3, inset 0 -1px #00000073;
}

.ds-rail:before {
  left: 0;
}

.ds-rail:after {
  right: 0;
}

.ds-clip {
  z-index: 2;
  background: linear-gradient(90deg, #0000 38%, #ffffffbf 45%, #fff 47.5%, #ffffffbf 50%, #0000 57%), linear-gradient(90deg, #0006, #0000 28% 72%, #0006), linear-gradient(#eeebe6 0%, #b5b0a8 45%, #77726a 80%, #55504a 100%);
  border-radius: 6px 6px 4px 4px;
  width: 46px;
  height: 58px;
  margin-left: -23px;
  position: absolute;
  top: -40px;
  left: 50%;
  box-shadow: 0 4px 6px #00000073, inset 0 1px #ffffffb3, inset 0 -3px #00000040;
}

.ds-slider {
  scrollbar-width: none;
}

.ds-slider::-webkit-scrollbar {
  display: none;
}

.ds-ticket {
  background-color: var(--night-paper);
  color: var(--night-paper-ink);
  padding: 1rem .75rem calc(1rem + 10px + var(--hang-extra, 0px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(#ffffff59, #0000000a);
  border-radius: 3px 3px 0 0;
  position: relative;
}

@media (min-width: 40rem) {
  .ds-ticket {
    padding: 1.25rem 1rem calc(1.25rem + 10px + var(--hang-extra, 0px));
  }
}

.ds-ticket {
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}

.ds-ticket-hang {
  transform: rotate(var(--hang-tilt, 0deg));
  transform-origin: 50% 0;
  filter: drop-shadow(0 2px 2px #00000059) drop-shadow(0 10px 14px #00000073);
  flex-direction: column;
  transition: filter .15s ease-out;
  display: flex;
  position: relative;
}

.ds-ticket-hang:hover, .ds-ticket-hang:focus-within, .ds-ticket-hang:active {
  filter: drop-shadow(0 3px 3px #0006) drop-shadow(0 16px 22px #0000008c);
}

.ds-ticket-hang[data-fold] > .ds-ticket, .ds-ticket-hang[data-fold] > article {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.ds-ticket-hang[data-fold] > .ds-ticket:before, .ds-ticket-hang[data-fold] > article:before {
  content: "";
  background: linear-gradient(225deg, transparent 50%, var(--night-paper-line) 50%, var(--night-paper) 100%);
  pointer-events: none;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: -2px 2px 3px #0000002e;
}

.ds-hero-photo {
  z-index: -2;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.ds-hero-plain {
  background-image: radial-gradient(120% 140% at 0 0, #ffffff0a 0%, #fff0 60%);
}

.ds-hero {
  isolation: isolate;
  background-color: var(--night-bg);
  background-position: center;
  background-size: cover;
  position: relative;
}

.ds-hero:before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #141210db 0%, #14121099 50%, #1412104d 100%),
            linear-gradient(0deg, var(--night-bg) 0%, #1c1a1700 28%);
  position: absolute;
  inset: 0;
}

.theme-night .text-primary, .theme-night .hover\:text-primary:hover {
  color: var(--night-amber);
}

.theme-night .ring-primary, .theme-night .hover\:ring-primary:hover, .theme-night .focus\:ring-primary:focus, .theme-night .focus-within\:ring-primary:focus-within {
  --tw-ring-color: var(--night-amber);
}

.theme-night .border-primary, .theme-night .hover\:border-primary:hover, .theme-night .focus\:border-primary:focus {
  border-color: var(--night-amber);
}

.theme-night .decoration-primary {
  -webkit-text-decoration-color: var(--night-amber);
  text-decoration-color: var(--night-amber);
}

.theme-night .accent-primary {
  accent-color: var(--night-amber);
}

.theme-night .ticket {
  color: var(--night-paper-ink);
  --brand-ink: var(--night-paper-ink);
  --brand-muted: var(--night-paper-muted);
  --brand-line: var(--night-paper-line);
  --brand-surface: #fbf7ee;
  --brand-primary: var(--night-green);
  --brand-danger-text: #9b2a13;
  --pal-stone-50: #f6f0e3;
  --pal-stone-100: #ebe2cf;
  --pal-stone-200: var(--night-paper-line);
  --pal-stone-300: #b9ac93;
  --pal-stone-400: #6f665a;
  --pal-stone-500: #645b4f;
  --pal-stone-600: var(--night-paper-muted);
  --pal-stone-700: #3d362d;
  --pal-stone-800: #2a251f;
  --pal-stone-900: var(--night-paper-ink);
  --pal-amber-700: #7a4a00;
  --pal-red-700: #9b2a13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.theme-night .ticket .text-primary {
  color: #2f5a2f;
}

.theme-night .ticket-hang {
  --brand-rail: #8f8a82;
  --brand-clip: #c9c4bc;
}

.theme-night .ticket-hang:before {
  background: linear-gradient(#d9d5ce 0%, #a8a39b 30%, #77726a 55%, #9b968e 80%, #5d5852 100%);
  height: 12px;
  box-shadow: inset 0 1px #ffffff80;
}

.theme-night .ticket-hang:after {
  background: linear-gradient(90deg, #5f5a53 0%, #b9b4ac 35%, #e2ded7 50%, #a39e96 65%, #5f5a53 100%);
  height: 30px;
  top: -6px;
  box-shadow: 0 4px 6px #00000073, inset 0 -3px #00000040;
}

.theme-night .ticket-hang {
  filter: drop-shadow(0 2px 2px #00000059) drop-shadow(0 10px 14px #00000073);
}

.theme-night .ticket-hang:hover, .theme-night .ticket-hang:focus-within, .theme-night .ticket-hang:active {
  filter: drop-shadow(0 3px 3px #0006) drop-shadow(0 16px 22px #0000008c);
}

.theme-night {
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.theme-night h1, .theme-night h2, .theme-night h3, .theme-night h4 {
  font-family: var(--night-font-serif);
  color: var(--night-ink);
  text-wrap: balance;
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.15;
}

.theme-night h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
}

.theme-night h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
}

.theme-night h3 {
  font-size: 1.375rem;
}

.theme-night p {
  margin: 0 0 1em;
}

.theme-night a {
  color: var(--night-amber);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.theme-night a:hover {
  text-decoration-thickness: 2px;
}

.theme-night :focus-visible {
  outline: 3px solid var(--night-amber);
  outline-offset: 2px;
  border-radius: 6px;
}

.theme-night small, .theme-night .text-muted {
  color: var(--night-muted);
}

.theme-night hr {
  border: 0;
  border-top: 1px solid var(--night-line);
  margin: 2rem 0;
}

.theme-night label {
  margin-bottom: .375rem;
  font-weight: 700;
  display: block;
}

.theme-night input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), .theme-night select, .theme-night textarea {
  width: 100%;
  min-height: 2.75rem;
  font: inherit;
  color: var(--night-ink);
  background-color: var(--night-field);
  border: 1px solid var(--night-field-line);
  box-sizing: border-box;
  border-radius: 10px;
  padding: .625rem .75rem;
  display: block;
}

.theme-night input::placeholder, .theme-night textarea::placeholder {
  color: var(--night-muted);
  opacity: 1;
}

:is(.theme-night input:focus-visible, .theme-night select:focus-visible, .theme-night textarea:focus-visible) {
  outline: 3px solid var(--night-amber);
  outline-offset: 1px;
  border-color: var(--night-amber);
}

.theme-night input[type="checkbox"], .theme-night input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--night-amber);
}

.btn {
  box-sizing: border-box;
  min-height: 2.75rem;
  font-family: var(--night-font-serif);
  text-align: center;
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
  display: inline-flex;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary, .theme-night a.btn-primary {
  background-color: var(--night-green);
  color: var(--night-on-green);
}

.btn-primary:hover, .theme-night a.btn-primary:hover {
  background-color: var(--night-green-hover);
}

.btn-outline, .theme-night a.btn-outline {
  border-color: var(--night-amber);
  color: var(--night-ink);
  background-color: #0000;
}

.btn-outline:hover, .theme-night a.btn-outline:hover {
  background-color: var(--night-card-hover);
}

.btn-block {
  width: 100%;
  display: flex;
}

.card {
  box-sizing: border-box;
  background-color: var(--night-card);
  border: 1px solid var(--night-line);
  border-radius: 14px;
  padding: 1.25rem;
}

.label {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--night-muted);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1rem;
}

.rail-row {
  padding-top: 2.5rem;
  position: relative;
}

.ticket-row {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 3rem 1rem;
  margin: -11px 0 0;
  padding: 0 .75rem 2rem;
  list-style: none;
  display: grid;
}

.ticket-row > .ds-ticket-hang {
  padding-top: 1rem;
}

.ticket-row:not(.is-still) {
  align-items: start;
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(5n+1) {
  --hang-tilt: -1.1deg;
  --hang-extra: 14px;
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(5n+2) {
  --hang-tilt: .7deg;
  --hang-extra: 32px;
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(5n+3) {
  --hang-tilt: -.4deg;
  --hang-extra: 4px;
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(5n+4) {
  --hang-tilt: 1.3deg;
  --hang-extra: 24px;
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(5n) {
  --hang-tilt: -.9deg;
  --hang-extra: 38px;
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(2) {
  --hang-tilt: 3.6deg;
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(4) > .ds-ticket {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

.ticket-row:not(.is-still) > .ds-ticket-hang:nth-child(4) > .ds-ticket:before {
  content: "";
  background: linear-gradient(225deg, transparent 50%, var(--night-paper-line) 50%, var(--night-paper) 100%);
  pointer-events: none;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: -2px 2px 3px #0000002e;
}

.ticket-row .ds-ticket {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.ticket-row .ds-ticket > .btn:last-child {
  margin-top: auto;
}

.ds-ticket h3, .ds-ticket h4 {
  color: var(--night-paper-ink);
}

.ds-ticket p, .ds-ticket .text-muted {
  color: var(--night-paper-muted);
}

.ds-ticket a:not(.btn) {
  color: var(--night-paper-ink);
}
