/* --- step navigation: every visible step is clickable --- */
#navigation-bar-section .nav-bar li a {
  cursor: pointer;
  position: relative;
  z-index: 1;
}
#navigation-bar-section .nav-bar li:not(.active) a:hover {
  text-decoration: underline;
}
/* the arrow of the active step sits on top of the next link and would
   swallow clicks, let them pass through */
#navigation-bar-section .nav-bar li.active a:before {
  pointer-events: none;
}
/* keep the tabs on top of the section's overflow clipping */
#navigation-bar-section {
  overflow: visible;
}

/* --- ticket table: match the live shop --- */

/* the shop only shows Price and Quantity, never the subtotal column */
#tickets-section .row-container .col.subtotal,
#tickets-section .row-container .top-row .col.subtotal {
  display: none !important;
}

/* "From" prefix on the variable-price rows */
#tickets-section .col.price .value.from::before {
  content: "From ";
}

/* keep "From €25.00" on one line like the live shop */
#tickets-section .col.price {
  white-space: nowrap;
}

/* fixed column grid so the price, quantity and header labels line up
   identically on every row instead of drifting with the price width */
@media screen and (min-width: 650px) {
  #tickets-section .row-container .col-container {
    table-layout: fixed;
  }
  #tickets-section .row-container .col.type {
    width: 50%;
  }
  #tickets-section .row-container .col.price {
    width: 28%;
    padding-right: 20px;
  }
  #tickets-section .row-container .col.number {
    width: 22%;
    padding-right: 20px;
  }
  /* one shared left edge for the "Quantity" header and every dropdown */
  #tickets-section .row-container .col.number .selectbox {
    float: none;
    display: inline-block;
    width: 75px;
    margin: 0;
  }
}
/* the dropdown never drifts away from the tariff name on narrow screens */
#tickets-section .row-container li.row .col.type {
  padding-right: 10px;
}

/* the info bubble next to the tariff name: the markup already has the
   icon-font span, it only needs to be visible and sized */
#tickets-section .col.type .icon.info-circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  vertical-align: -2px;
}
#tickets-section .col.type .icon.info-circle::before {
  content: "i";
  font-family: Arial, sans-serif;
  font-weight: 700;
}
#tickets-section .col.type .info-icon { display: none; }

/* previous-step button sits next to the submit button */
#button-steps .previous-step {
  margin-right: 12px;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000;
}

/* inputs: thin grey border like the live shop, not the red invalid one */
#main-content input[type="text"],
#main-content input[type="email"],
#main-content input[type="tel"],
#main-content input[type="number"] {
  border: 1px solid #d9d9d9 !important;
  background: #fff;
  box-shadow: none;
}
#main-content input[type="text"]:focus,
#main-content input[type="email"]:focus,
#main-content input[type="tel"]:focus,
#main-content input[type="number"]:focus {
  border-color: #ffce01 !important;
  outline: none;
}

/* --- personal details: same thin grey fields as the payment card form --- */
#personal-data-section .data-fields {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 520px;
}
#personal-data-section .data-fields li.field {
  float: none !important;
  width: 100% !important;
  margin: 0 0 16px;
  padding: 0;
  position: static !important;
  clear: both;
}
#personal-data-section .data-fields label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
}
#personal-data-section .data-fields input {
  width: 100% !important;
  height: 44px !important;
  padding: 10px 14px !important;
  box-sizing: border-box;
  font-size: 15px;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px;
  background: #fff;
  position: static !important;
}
#personal-data-section .data-fields input:focus {
  border-color: #ffce01 !important;
  outline: none;
}
#personal-data-section .data-fields .selectbox {
  width: 100%;
  height: 44px;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px;
  background: #fff;
  float: none;
}
#personal-data-section .data-fields .selectbox select {
  width: 100%;
  height: 100%;
  padding: 0 14px;
  font-size: 15px;
}
#personal-data-section .data-fields li:last-child {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#personal-data-section .data-fields li:last-child label {
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

/* --- payment methods: large grey tiles, thick gold outline on the one
   that is actually chosen (no black frame anywhere) --- */
#payment-section .payments-container li {
  height: 90px;
  width: 33.333%;
  border: 0;
}
#payment-section .payments-container label {
  border: 2px solid #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}
#payment-section .payments-container label:hover {
  border-color: #ffce01 !important;
}
#payment-section .payments-container input:checked ~ label,
#payment-section .payments-container input:checked + label {
  border: 3px solid #ffce01 !important;
  border-color: #ffce01 !important;
  background: #fff;
}
#payment-section .payments-container img {
  max-width: 80%;
  max-height: 70%;
}
#payment-section .payments-container input {
  cursor: pointer;
}

/* --- adyen-like checkout: terms first, Apple Pay, tiles, card fields --- */
#payment-section #terms-and-conditions-section {
  margin: 0 0 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#payment-section #terms-and-conditions-section input {
  margin-top: 3px;
}
#payment-section .privacy-note {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.45;
}
#payment-section .privacy-note a { color: #000; }

#payment-section .apple-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}
#payment-section .apple-pay:hover { opacity: .88; }

#payment-section .or-separator {
  position: relative;
  margin: 18px 0;
  text-align: center;
  color: #6b6b6b;
  font-size: 14px;
}
#payment-section .or-separator:before,
#payment-section .or-separator:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: #e0e0e0;
}
#payment-section .or-separator:before { left: 0; }
#payment-section .or-separator:after { right: 0; }

/* the 5th and 6th wheels only appear after "Show more options" */
#payment-section .payments-container li:nth-child(n + 5) { display: none; }
#payment-section.show-all-options .payments-container li:nth-child(n + 5) { display: block; }
#payment-section.show-all-options #show-more-options { display: none; }

#payment-section #show-more-options {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 15px;
  cursor: pointer;
}
#payment-section #show-more-options .icon { font-size: 11px; }

/* payment forms appear only once a method is chosen */
#payment-forms.active {
  margin-top: 18px;
}
#payment-section #creditcard-form .text-container h3,
#payment-section #ideal-form .text-container h3 {
  font-size: 18px;
  margin: 0 0 12px;
}

/* SMS code boxes */
#payment-section .sms-note {
  margin: 0 0 8px;
  font-size: 15px;
}
#payment-section .sms-code {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
#payment-section .sms-code input {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px;
  text-align: center;
  font-size: 17px;
}
#payment-section .sms-code input:focus {
  border-color: #ffce01 !important;
  outline: none;
}
#payment-section .required-note {
  margin: 0 0 16px;
  font-size: 14px;
}

/* --- card fields: soft grey inputs, gold focus, tidy spacing --- */
#creditcard-form .data-fields {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 620px;
}
#creditcard-form .data-fields li.field {
  flex: 1 1 100%;
  clear: both;
  float: none !important;
  position: static !important;
  margin: 0;
  padding: 0;
}
#creditcard-form .data-fields li.field.half {
  flex: 1 1 calc(50% - 8px);
}
#creditcard-form .data-fields label {
  float: none;
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}
/* the input and its little brand / date / cvc badge share one rounded box */
.card-input-wrap {
  position: relative;
}
#creditcard-form .data-fields input,
#creditcard-form .data-fields input[type="text"],
#creditcard-form .data-fields input[type="tel"] {
  position: static !important;
  width: 100% !important;
  height: 46px !important;
  padding: 10px 44px 10px 14px !important;
  box-sizing: border-box;
  font-size: 15px;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
#creditcard-form .data-fields input:focus {
  border-color: #ffce01 !important;
  outline: none;
}
#creditcard-form .data-fields input.error {
  border-color: #c8102e !important;
}
.card-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 16px;
  margin-top: -8px;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  background: #f2f2f2;
}
.card-icon-date:after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 3px;
  width: 8px;
  height: 5px;
  border: 1px solid #d1755f;
  border-radius: 1px;
}
.card-icon-cvc:after {
  content: "123";
  position: absolute;
  right: 2px;
  top: 2px;
  font-size: 6px;
  color: #8c8c8c;
}
.card-brand {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 16px;
  margin-top: -8px;
  border-radius: 3px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* the accepted-brand strip under the card number, like Adyen */
#creditcard-form .card-brands {
  display: flex;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
#creditcard-form .card-brands li {
  width: 28px;
  height: 18px;
  border-radius: 3px;
  background: #eef1f6;
  position: relative;
  overflow: hidden;
}
#creditcard-form .card-brands li:after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: #c9cfda;
}
#creditcard-form .field-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}
#creditcard-form .card-brands .brand-visa:after { background: #1a1f71; }
#creditcard-form .card-brands .brand-mastercard:after { background: #eb001b; }
#creditcard-form .card-brands .brand-amex:after { background: #2e77bc; }

/* summary: stacked "Check your order" sections, like the live shop */
#summary-section {
  padding-bottom: 120px;
}
#booking-information {
  display: block;
  background: transparent;
  padding: 0 0 0 0;
  max-width: 760px;
}
#booking-information .information {
  width: auto !important;
  display: block !important;
  padding: 0 !important;
  background: transparent;
}
.sum-block {
  margin: 0 0 18px;
}
.sum-block .sum-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
/* the sticky step bar must not sit on the total */
#summary-section #booking-information {
  padding-bottom: 90px;
}
@media screen and (max-width: 649px) {
  #summary-section #booking-information { padding-bottom: 110px; }
}
.sum-block h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
/* the "edit" action sits on the right of each section header */
.sum-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #000;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.sum-edit .icon {
  font-size: 10px;
  transform: rotate(180deg);
}
.sum-edit:hover { text-decoration: underline; }

.sum-line {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #ddd;
  font-size: 15px;
}
.sum-line .value,
.sum-line .sum-amount { margin-left: auto; white-space: nowrap; }
.sum-name { flex: 1 1 auto; }
.sum-unit { width: 90px; }
.sum-qty { width: 40px; text-align: center; }

/* the yellow rule above the total, exactly like the live shop */
.sum-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 6px;
  padding: 12px 0;
  border-top: 2px solid #ffce01;
  font-size: 16px;
  font-weight: 700;
}
#booking-information-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: static !important;
  margin: 0;
}
/* "Edit order" / "Edit details": white pill with a thin grey frame,
   the same secondary-button style as "Previous step" */
#booking-information-buttons .button.prev {
  position: static !important;
  margin: 0 !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #d4d4d4;
  white-space: nowrap;
  box-shadow: none;
  font-size: 15px;
  height: 44px;
  line-height: 42px;
  padding: 0 18px;
}
#booking-information-buttons .button.prev:hover {
  border-color: #000;
}
/* the sidebar cards on summary stay neutral grey like the live shop */
#summary-section ~ .sidebar .section.second,
#summary-section ~ .sidebar .section.third {
  background: transparent;
  border: 2px solid #ffce01;
}

/* previous step in the bottom bar: white pill with a light grey frame,
   exactly like the live shop */
#button-steps .previous-step {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #d4d4d4;
}
#button-steps .previous-step:hover {
  border-color: #000;
}
#button-steps .previous-step .icon:before {
  border-color: #000;
}

/* selected time slot: black fill like the live shop (branded.css wins otherwise) */
#timeslots-container input[type="radio"]:checked ~ label,
#timeslots input[type="radio"]:checked ~ label,
.timeslots-container input[type="radio"]:checked ~ label {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* --- compact vertical rhythm, matching the live shop -----------------
   The captured page stacked a tall banner, a 50px hole, a 60px gap under
   the step bar and oversized headings. Tighten it on every step. */
header#header-v2 {
  height: 150px !important;
}
@media screen and (min-width: 650px) {
  header#header-v2 {
    height: 200px !important;
  }
}
#header-v2 .logo-container img {
  max-height: 78px;
  width: auto;
}

.page-body > form > .wrapper {
  padding-top: 0 !important;
}

/* the language selector used to open a 50–66px hole under the banner */
#features-section {
  margin: 8px auto 10px !important;
}
@media screen and (min-width: 1000px) {
  #features-section {
    top: 34px !important;
    margin: 0 auto 6px !important;
  }
}
#features-section .selectbox {
  margin: 0 !important;
}
#features-section .selectbox,
#features-section .selectbox select {
  height: 46px !important;
}
@media screen and (min-width: 650px) {
  #features-section .selectbox,
  #features-section .selectbox select {
    height: 50px !important;
  }
}

#navigation-bar-section {
  margin: 16px 10px 24px !important;
}
@media screen and (min-width: 650px) {
  #navigation-bar-section {
    margin: 18px 0 28px !important;
  }
}

#introduction-section {
  margin: 0 0 18px !important;
}
#introduction-section h1 {
  font-size: 26px !important;
  line-height: 1.22 !important;
  margin: 0 0 12px !important;
  font-weight: 500 !important;
}
@media screen and (min-width: 650px) {
  #introduction-section h1 {
    font-size: 32px !important;
    margin: 0 0 14px !important;
  }
}

/* ticket table: less air in the header row and the tariff rows */
#tickets-section .row-container li {
  padding: 8px 10px !important;
}
#tickets-section .row-container .top-row {
  padding: 12px 10px !important;
  font-size: 15px !important;
}
#tickets-section .row-container .event-title {
  margin: 14px 0 0 !important;
}
#tickets-section .row-container .event-title:first-child {
  margin: 0 !important;
}
#tickets-section {
  margin-bottom: 20px !important;
}
/* the fixed step bar must not cover the last tariff rows */
#tickets-section,
#tickets-footer-text-section {
  scroll-margin-bottom: 110px;
}
#main-content {
  padding-bottom: 110px;
}
@media screen and (min-width: 650px) {
  #main-content {
    padding-bottom: 120px;
  }
}

/* the tariff price column reads a little lighter, as on the live shop */
#tickets-section .row-container .col.price .value {
  font-weight: 400 !important;
}