/* =========================================================
   TAXI TILBURG - BETAALMOGELIJKHEDEN
   Desktop + tablet + mobiel
   ========================================================= */


/* =========================================================
   SECTIE
   ========================================================= */

.payment-section {
  padding: 64px 0;
  background: var(--color-white);
}


/* =========================================================
   KOP
   ========================================================= */

.payment-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.payment-heading .eyebrow {
  margin-bottom: 8px;
}

.payment-heading h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.15;
  color: var(--color-navy);
}

.payment-heading p {
  max-width: 720px;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-grey-body);
}


/* =========================================================
   BETAALLOGO'S
   ========================================================= */

.payment-logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 132px;

  margin-bottom: 24px;
  padding: 18px 24px;

  background: var(--color-grey-light-bg);

  border: 1px solid var(--color-border);
  border-radius: 16px;

  overflow: hidden;
}

.payment-logo-panel img {
  display: block;

  width: 100%;
  max-width: 1040px;
  height: auto;

  margin: 0 auto;

  object-fit: contain;

  transform: none;
  transform-origin: center center;
}


/* =========================================================
   VOORDELEN
   ========================================================= */

.payment-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

  margin-bottom: 22px;
}

.payment-feature {
  display: flex;
  align-items: flex-start;

  gap: 12px;

  padding: 18px;

  background: var(--color-white);

  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.payment-feature-check {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 30px;

  border-radius: 50%;

  background: var(--color-blue-tint);
  color: var(--color-blue);

  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.payment-feature strong {
  display: block;

  margin-bottom: 5px;

  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;

  color: var(--color-navy);
}

.payment-feature p {
  margin: 0;

  font-size: 13.5px;
  line-height: 1.55;

  color: var(--color-grey-body);
}


/* =========================================================
   ZAKELIJK BLOK
   ========================================================= */

.payment-business {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding: 22px;

  background: var(--color-blue-tint);

  border: 1px solid #dce8f8;
  border-radius: 16px;
}

.payment-business-content {
  max-width: 720px;
}

.payment-business-label {
  margin-bottom: 4px;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--color-blue);
}

.payment-business strong {
  display: block;

  margin-bottom: 5px;

  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;

  color: var(--color-navy);
}

.payment-business p {
  margin: 0;

  font-size: 14px;
  line-height: 1.55;

  color: var(--color-grey-body);
}

.payment-business-link {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  padding: 0 18px;

  border-radius: 10px;

  background: var(--color-blue);
  color: var(--color-white);

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  transition:
    background-color .15s ease,
    transform .15s ease;
}

.payment-business-link:hover,
.payment-business-link:focus-visible {
  background: #0C46A8;
  color: var(--color-white);

  transform: translateY(-1px);

  outline: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .payment-section {
    padding: 56px 0;
  }

  .payment-heading h2 {
    font-size: 32px;
  }

  .payment-logo-panel {
    min-height: 122px;
    padding: 16px 18px;
  }

  .payment-logo-panel img {
    transform: none;
  }

  .payment-features {
    grid-template-columns: 1fr;
  }

  .payment-business {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 620px) {

  .payment-section {
    padding: 46px 0;
  }

  .payment-heading {
    margin-bottom: 22px;
  }

  .payment-heading h2 {
    font-size: 28px;
  }

  .payment-heading p {
    font-size: 15px;
    line-height: 1.6;
  }

  .payment-logo-panel {
    min-height: 112px;

    justify-content: flex-start;

    padding: 10px 12px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .payment-logo-panel img {
    width: 760px;
    max-width: none;
    height: auto;

    flex: 0 0 760px;

    transform: none;
    transform-origin: left center;
  }

  .payment-features {
    gap: 12px;
  }

  .payment-feature {
    padding: 17px;
  }

  .payment-feature strong {
    font-size: 15px;
  }

  .payment-business {
    padding: 20px;
  }

  .payment-business-link {
    width: 100%;
  }

}


/* =========================================================
   ZEER KLEINE MOBIEL
   ========================================================= */

@media (max-width: 380px) {

  .payment-heading h2 {
    font-size: 26px;
  }

  .payment-logo-panel {
    min-height: 104px;
  }

  .payment-logo-panel img {
    width: 700px;
    flex-basis: 700px;
  }

  .payment-feature {
    padding: 16px;
  }

  .payment-business {
    padding: 18px;
  }

}


/* =========================================================
   TOEGANKELIJKHEID
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .payment-business-link {
    transition: none;
  }

}

/* Original brand marks in separate lossless assets, one step at a time. */
.payment-carousel{--payment-card-width:148px;--payment-gap:14px;margin:24px 0;min-width:0}
.payment-carousel__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.payment-carousel__label{margin:0;color:var(--color-grey-body);font-size:13px;line-height:1.5}
.payment-carousel__toggle{display:none;min-height:44px;padding:8px 14px;border:1px solid var(--color-border);border-radius:10px;background:#fff;color:var(--color-navy);font:inherit;font-size:13px;cursor:pointer}
.payment-carousel.is-enhanced .payment-carousel__toggle{display:inline-flex;align-items:center;gap:8px}
.payment-carousel__toggle:hover{border-color:var(--color-blue)}
.payment-carousel__toggle:focus-visible,.payment-carousel__viewport:focus-visible{outline:3px solid #087ca5;outline-offset:3px}
.payment-carousel__viewport{overflow-x:auto;overflow-y:hidden;border-radius:16px;scrollbar-width:thin;padding:4px 2px 10px;overscroll-behavior-x:contain}
.payment-carousel.is-enhanced .payment-carousel__viewport{overflow-x:hidden}
.payment-carousel__track{display:flex;gap:var(--payment-gap);width:max-content;list-style:none;padding:0;margin:0;transform:translateX(0)}
.payment-carousel.is-enhanced .payment-carousel__track{transition:transform 600ms cubic-bezier(.22,.61,.36,1)}
.payment-carousel__card{flex:0 0 var(--payment-card-width);width:var(--payment-card-width);box-sizing:border-box;padding:12px 8px 14px;text-align:center;background:#fff;border:1px solid var(--color-border);border-radius:14px;box-shadow:0 3px 12px rgba(7,17,30,.035)}
.payment-carousel__mark{display:block;height:82px;width:100%;max-width:114px;margin:0 auto 8px;object-fit:contain}
.payment-carousel__name{display:block;color:var(--color-navy);font-size:12px;line-height:1.4;font-weight:600}
@media(max-width:620px){.payment-carousel{--payment-card-width:132px;--payment-gap:10px}.payment-carousel__label{max-width:190px}.payment-carousel__card{padding-top:10px}.payment-carousel__mark{height:78px}}
@media(prefers-reduced-motion:reduce){.payment-carousel.is-enhanced .payment-carousel__track{transition:none}.payment-carousel.is-enhanced .payment-carousel__viewport{overflow-x:auto}}

@media(prefers-reduced-motion:reduce){.payment-carousel.is-enhanced .payment-carousel__toggle{display:none}.payment-carousel__track>[aria-hidden="true"]{display:none}}

/* Open, floating logo strips with soft edges. */
.payment-carousel__viewport{border-radius:0;padding:12px 0;mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.payment-carousel__card{background:transparent;border:0;border-right:1px solid #e3e8ee;border-radius:0;box-shadow:none;padding:8px 12px}
.payment-carousel__toggle{border-radius:24px}
.payment-carousel__name{font-weight:500;color:#526174}
@media(max-width:620px){.payment-carousel__viewport{mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent)}}
/* Betaallogo's: toon de volledige afbeelding zonder afsnijden of uitrekken. */
.payment-logo-panel { min-height: 0; padding: 22px 26px; overflow: visible; background: #f8fafc; }
.payment-logo-panel img { width: 100%; max-width: 1040px; height: auto; transform: none; object-fit: contain; }
@media (max-width: 900px) {
  .payment-logo-panel { min-height: 0; padding: 18px 20px; }
  .payment-logo-panel img { transform: none; }
}
@media (max-width: 620px) {
  .payment-logo-panel { display: block; min-height: 0; padding: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .payment-logo-panel img { display: block; width: 680px; max-width: none; height: auto; transform: none; }
}
@media (max-width: 380px) {
  .payment-logo-panel img { width: 640px; max-width: none; }
}

/* Telefonisch boeken: gedeelde, onderhoudbare responsive layout. */
.phone-booking-section { padding: 48px 0; background: #f6f9fc; border-top: 1px solid #e3e9f0; border-bottom: 1px solid #e3e9f0; }
.phone-booking-layout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.phone-booking-content { flex: 1 1 320px; max-width: 690px; min-width: 0; }
.phone-booking-content h2 { margin: 8px 0 12px; color: #1f2328; font-size: clamp(26px,3vw,36px); line-height: 1.2; }
.phone-booking-content p { margin: 0; color: #444b54; line-height: 1.7; }
.phone-booking-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.phone-booking-actions a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.phone-booking-actions a:focus-visible { outline: 3px solid #0bbfff; outline-offset: 3px; }
@media (max-width: 620px) { .phone-booking-section { padding: 36px 0; } .phone-booking-actions { width: 100%; } .phone-booking-actions a { flex: 1 1 140px; } }


/* Seamless, continuous movement for both logo strips. */
.payment-carousel.is-enhanced .payment-carousel__track{transition:none;animation:taxi-logo-flow var(--carousel-duration,32s) linear infinite;will-change:transform}
@keyframes taxi-logo-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--carousel-distance,0px)),0,0)}}
.payment-carousel.is-enhanced .payment-carousel__track.is-paused,.payment-carousel.is-enhanced .payment-carousel__track.is-hover-paused,.payment-carousel.is-enhanced .payment-carousel__track.is-focus-paused{animation-play-state:paused}
/* Keep pause available to mouse, touch and keyboard users. */
@media(prefers-reduced-motion:reduce){.payment-carousel.is-enhanced .payment-carousel__track{animation:none}.payment-carousel.is-enhanced .payment-carousel__viewport{overflow-x:auto}}