/* ==========================================================================
   CUSTOMISATIONS.CSS
   Our own additions on top of the site's original styling.
   Loaded after the original stylesheet, so this always wins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TRACKING BAR IN THE HERO
   Multi-coloured glow around the field once it is active or being typed in.
   -------------------------------------------------------------------------- */

.track {
  --tr-1: #F3A21E;
  --tr-2: #F3B8CD;
  --tr-3: #ff5cc8;
  --tr-4: #cba9f0;
  --tr-5: #4fc3f7;
  --tr-6: #F7D73B;

  width: min(40rem, 100%);
  display: flex;
  flex-direction: column;
  gap: .85rem;
  text-align: left;
  margin-inline: auto;
}

/* The original button container is narrow; it has to grow with the bar */
.singel-col-hero_button-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
}
.singel-col-hero_button-wrapper > .track { flex: 0 1 auto; }

.track__label {
  font-size: .875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  margin: 0;
}

/* Outer layer carries only the glow */
.track__field {
  position: relative;
  z-index: 0;
  border-radius: .75rem;
}

.track__field::before {
  content: '';
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: calc(.75rem + 5px);
  padding: 5px;
  background: linear-gradient(90deg,
    var(--tr-1), var(--tr-2), var(--tr-3), var(--tr-4), var(--tr-5), var(--tr-6), var(--tr-1));
  background-size: 300% 100%;
  filter: blur(10px);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Inner layer: the field itself, with an opaque fill */
.track__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .4rem .4rem 1.1rem;
  border-radius: inherit;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .28);
  transition: border-color .25s ease;
}

/* Scherpe rand in dezelfde kleuren */
.track__inner::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg,
    var(--tr-1), var(--tr-2), var(--tr-3), var(--tr-4), var(--tr-5), var(--tr-6), var(--tr-1));
  background-size: 300% 100%;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.track__field:focus-within .track__inner,
.track.is-typing .track__inner { border-color: transparent; }

.track__field:focus-within::before,
.track.is-typing .track__field::before { opacity: .48; animation: track-glow 4s linear infinite; }

.track__field:focus-within .track__inner::after,
.track.is-typing .track__inner::after { opacity: 1; animation: track-glow 4s linear infinite; }

@keyframes track-glow { to { background-position: 300% 0; } }

@media (prefers-reduced-motion: reduce) {
  .track__field::before, .track__inner::after { animation: none !important; }
}

.track__icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: rgba(255, 255, 255, .55);
}

.track__input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1.0625rem;
  padding: .8rem 0;
  border: 0;
  background: transparent;
  color: #fff;
}
.track__input::placeholder { color: rgba(255, 255, 255, .45); }
.track__input:focus { outline: none; }

.track__button {
  flex: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: .5rem;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.track__button:hover { transform: translateY(-1px); opacity: .9; }

.track__status {
  margin: 0;
  min-height: 1.4em;
  font-size: 1rem;
  color: rgba(255, 255, 255, .65);
}
.track__status.is-error { color: #ff5cc8; }

@media (max-width: 560px) {
  .track__inner { flex-wrap: wrap; padding: .75rem; }
  .track__input { flex-basis: 100%; padding-block: .5rem; }
  .track__button { width: 100%; }
}
.header_logo,
.footer_logo {
  width: 7.75rem;
}

.header_logo svg,
.footer_logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The footer sits on the black theme but some imported elements retained the
   light-theme foreground. Keep all footer copy and links readable. */
.section_theme.is-black .footer_columns,
.section_theme.is-black .footer_company,
.section_theme.is-black .footer_legal,
.section_theme.is-black .footer_menu-link,
.section_theme.is-black .footer_column,
.section_theme.is-black .footer_logo-box {
  color: #fff;
}

.section_theme.is-black .footer_logo svg {
  filter: invert(1);
}

/* Imported black sections sometimes keep an explicit black foreground. */
.section_theme.is-black .cta_content,
.section_theme.is-black .cta_content *,
.section_theme.is-black .legal_hero,
.section_theme.is-black .legal_hero * {
  color: #fff !important;
}

/* White CTA buttons intentionally use dark text. */
.section_theme.is-black .cta_content .button_animate-chars,
.section_theme.is-black .cta_content .button_animate-chars *,
.section_theme.is-black .legal_hero .button_animate-chars,
.section_theme.is-black .legal_hero .button_animate-chars * {
  color: #000 !important;
}

/* Remove the legacy 3D SendNet mark embedded between the CTA heading words. */
.icon-heading_icon.is-cta {
  display: none !important;
}

/* Phone contact is intentionally omitted from both header variants. */
header a[href^="tel:"],
header a:has(#phone-number) {
  display: none !important;
}

.sendnet-demo-form { width:100%; color:#555; }
.sendnet-demo-form h2 { margin:0 0 .65rem; color:#4b4b4b; font-size:1.65rem; font-weight:500; }
.sendnet-demo-form-intro { margin:0 0 2.25rem; color:#666; font-size:1rem; }
.sendnet-demo-field { display:block; margin:0 0 1.45rem; }
.sendnet-demo-label { display:block; margin-bottom:.55rem; color:#585858; font-size:1rem; }
.sendnet-demo-help { display:block; margin:-.25rem 0 .65rem; color:#999; font-size:.85rem; }
.sendnet-demo-required { color:#ed6b55; }
.sendnet-demo-input,
.sendnet-demo-select { width:100%; min-height:3.5rem; border:1px solid #d2d2d2; border-radius:.45rem; padding:.8rem 1rem; background:#fff; color:#222; font:inherit; }
.sendnet-demo-check { display:flex; align-items:center; gap:.65rem; margin-top:.75rem; color:#666; }
.sendnet-demo-check input { width:1.2rem; height:1.2rem; }
.sendnet-demo-actions { display:flex; justify-content:flex-end; padding-top:1rem; }
.sendnet-demo-submit { border:0; border-radius:.4rem; padding:1rem 1.45rem; background:#050505; color:#fff; font:inherit; cursor:pointer; }
.sendnet-demo-submit:hover { opacity:.82; }

.footer_omr-logo img[src*="sendnet-logo"] {
  filter: invert(1);
}

.sendnet-impact-form { padding:clamp(1.5rem,4vw,4rem); background:#050505; color:#fff; }
.sendnet-impact-form h2 { margin:0 0 .5rem; color:#fff; font-size:clamp(1.6rem,3vw,2.5rem); font-weight:500; }
.sendnet-impact-form > p { margin:0 0 2rem; color:rgba(255,255,255,.65); }
.sendnet-impact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.sendnet-impact-field { display:block; }
.sendnet-impact-field span { display:block; margin-bottom:.55rem; color:rgba(255,255,255,.8); }
.sendnet-impact-field select { width:100%; min-height:3.5rem; border:1px solid rgba(255,255,255,.25); border-radius:.5rem; padding:.75rem 2.5rem .75rem 1rem; background:#171717; color:#fff; font:inherit; }
.sendnet-impact-actions { display:flex; justify-content:flex-end; margin-top:2rem; }
.sendnet-impact-submit { border:0; border-radius:.45rem; padding:1rem 1.4rem; background:#fff; color:#050505; font:inherit; font-weight:500; cursor:pointer; }
@media (max-width:767px) { .sendnet-impact-grid{grid-template-columns:1fr} }

.sendnet-product-rive-static {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  border-radius: inherit;
}
.sendnet-product-hero-brand {
  position:absolute !important;
  z-index:5;
  top:2.4% !important;
  right:auto !important;
  bottom:auto !important;
  left:1.05% !important;
  transform:none !important;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:9.2%;
  height:7.2%;
  padding:0 .35%;
  overflow:hidden;
  background:#fff;
  border:0;
  box-shadow:none;
  pointer-events:none;
}
.sendnet-product-hero-brand img { display:block; width:100%; height:auto; margin:0; }

.rive-hero-element[data-rive-url$="delivery-hero1280x633.riv"] .sendnet-product-hero-brand {
  top:2.6% !important;
  left:1.15% !important;
  width:9.5%;
  height:7.4%;
}

.rive-hero-element {
  position: relative;
}

.rive-hero-element[data-brand-composite-mode="full"] > canvas:first-child {
  opacity: 0;
}

.rive-hero-composite {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Keep the CTA words visually separated even though Webflow uses adjacent spans. */
.icon-heading_wrapper .inline-span.z-3 {
  margin-left: .18em;
}

/* The footer brand should have the same visual weight as the navigation logo. */
.footer_omr-logo {
  width: clamp(8.5rem, 10vw, 11rem) !important;
}
.footer_omr-logo img[src*="sendnet-logo"] {
  width: 100% !important;
  height: auto !important;
}


.sendnet-ops-demo { position:relative; width:100%; aspect-ratio:738/561; overflow:hidden; border-radius:.75rem; background:#ffed9e; padding:7.2rem 0 0 3.6rem; }
.sendnet-ops-tabs { position:absolute; z-index:3; top:3rem; left:50%; display:flex; gap:.65rem; transform:translateX(-50%); }
.sendnet-ops-tab { border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:.65rem 1.25rem; background:rgba(255,255,255,.28); color:#171717; font:inherit; cursor:pointer; transition:background-color .45s ease,color .45s ease; }
.sendnet-ops-tab.is-active { background:#050505; color:#fff; }
.sendnet-ops-stage { position:relative; width:100%; height:100%; overflow:hidden; border-radius:.65rem 0 0; background:#fff; }
.sendnet-ops-view { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top left; opacity:0; transform:translateY(1.25rem) scale(.993); transition:opacity .65s ease,transform .8s cubic-bezier(.22,.7,.2,1); pointer-events:none; }
.sendnet-ops-view.is-active { z-index:2; opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
@media (max-width:767px) { .sendnet-ops-demo{padding:5rem 0 0 1.5rem}.sendnet-ops-tabs{top:1.5rem}.sendnet-ops-tab{padding:.45rem .8rem;font-size:.75rem} }
.sendnet-demo-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.sendnet-demo-status{margin:16px 0 0;min-height:24px;font-size:15px;line-height:1.5}
.sendnet-demo-status.is-success{color:#087a3b}
.sendnet-demo-status.is-error{color:#b42318}
.sendnet-demo-submit:disabled{opacity:.6;cursor:wait}

/* One oversized, low-contrast SendNet mark integrated into the footer. */
section.section_theme.is-black:has(.footer_company) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
section.section_theme.is-black:has(.footer_company)::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(92vw, 96rem);
  aspect-ratio: 2450 / 2120;
  left: 50%;
  bottom: -38%;
  transform: translateX(-50%);
  background: url("../img/sendnet-footer-mark.svg") center / contain no-repeat;
  opacity: .72;
  pointer-events: none;
}
section.section_theme.is-black:has(.footer_company) .footer_rating-box {
  display: none !important;
}
section.section_theme.is-black:has(.footer_company) > * {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  section.section_theme.is-black:has(.footer_company)::before {
    width: 150vw;
    left: 58%;
    bottom: -8%;
    opacity: .62;
  }
}