:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-black: #000;
  --color-white: #fff;
  --spacing: 0.25rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-5xl: 64rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --radius-xs: 0.125rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --blur-sm: 8px;
  --blur-2xl: 40px;
  --aspect-video: 16 / 9;
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --default-font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  --default-mono-font-family: var(--font-mono);
  --radius: 4px;
  --color-gij-green: oklch(72% 0.18 128);
  --color-gij-green-dark: oklch(58% 0.16 128);
  --color-gij-black: oklch(12% 0 0);
  --color-gij-nav: oklch(8% 0 0);
  --color-gij-grey: oklch(55% 0 0);
  --color-gij-light: oklch(96% 0 0);
  --color-gij-border: oklch(88% 0 0);
  --color-gij-muted: oklch(70% 0 0);
  --font-cond: "Oswald", ui-sans-serif, system-ui, sans-serif;
  --font-nav: "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif;
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(12% 0 0);
  --border: oklch(88% 0 0);
}

.players-wrapper .form-control,
.your-booking-card .form-control,
.players-wrapper select.form-select,
.your-booking-card select.form-select {
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 1rem;
  border: 1px solid var(--color-gij-border, #d9d9d9);
  background: #fff;
  outline: none;
  border-radius: 0;
  color: var(--color-gij-black, #000);
  box-sizing: border-box;
}

.players-wrapper input.form-control:required:invalid,
.your-booking-card input.form-control:required:invalid,
.players-wrapper input.form-control:required:invalid::placeholder,
.your-booking-card input.form-control:required:invalid::placeholder,
.players-wrapper textarea.form-control:required:invalid,
.your-booking-card textarea.form-control:required:invalid,
.players-wrapper textarea.form-control:required:invalid::placeholder,
.your-booking-card textarea.form-control:required:invalid::placeholder {
  color: red;
}

.players-wrapper input.form-control:valid,
.your-booking-card input.form-control:valid,
.players-wrapper textarea.form-control:valid,
.your-booking-card textarea.form-control:valid {
  border-color: var(--color-gij-green);
}

.players-wrapper select.form-select:invalid,
.your-booking-card select.form-select:invalid,
.players-wrapper .gij-country-select__button.is-placeholder,
.your-booking-card .gij-country-select__button.is-placeholder {
  color: red !important;
}

.players-wrapper select.form-select:valid,
.your-booking-card select.form-select:valid,
.players-wrapper .gij-country-select__button:not(.is-placeholder),
.your-booking-card .gij-country-select__button:not(.is-placeholder) {
  border-color: var(--color-gij-green) !important;
}
/* Select (Nationality) needs its own rules for the native dropdown arrow —
   replace the browser-default caret with the same chevron used elsewhere
   in the design, and reserve right padding so text doesn't run under it. */
.players-wrapper select.form-select,
.your-booking-card select.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%230c0c0c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 12px 12px;
}

.players-wrapper select.form-select:focus,
.your-booking-card select.form-select:focus {
  border-color: var(--color-gij-green);
}

/* ══════════════════════════════════════════════════════════════════════
   Custom Nationality select (flag + searchable dropdown) — replaces the
   native <select>, which browsers render with OS-level UI that can't be
   styled or given flag icons / a search box.
   ══════════════════════════════════════════════════════════════════════ */
.gij-country-select {
  position: relative;
  width: 100%;
  font-family: var(--font-sans, "Inter", sans-serif);
}

.gij-country-select__button {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--color-gij-border, #d9d9d9);
  border-radius: 0;
  background: #fff;
  color: var(--color-gij-black, #0c0c0c);
  cursor: pointer;
  text-align: left;
}

.gij-country-select__button:focus {
  outline: none;
  border-color: var(--color-gij-green);
}

.gij-country-select__button.is-placeholder {
  color: var(--color-gij-muted, #aaa);
}

.gij-country-select__button::after {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%230c0c0c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.15s ease-out;
}

.gij-country-select.is-open .gij-country-select__button::after {
  transform: rotate(180deg);
}

.gij-country-select__panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-gij-border, #d9d9d9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  max-height: 280px;
}

.gij-country-select__search {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem 0.625rem;
  font-size: 0.9375rem;
  font-family: inherit;
  border: none;
  border-bottom: 1px solid var(--color-gij-border, #d9d9d9);
  outline: none;
  color: var(--color-gij-black, #0c0c0c);
}

.gij-country-select__search:focus {
  border-bottom-color: var(--color-gij-green);
}

.gij-country-select__search::placeholder {
  color: var(--color-gij-muted, #aaa);
}

.gij-country-select__list {
  overflow-y: auto;
}

.gij-country-select__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-gij-black, #0c0c0c);
  cursor: pointer;
}

.gij-country-select__option:hover {
  background: var(--color-gij-light, #f5f5f5);
}

.gij-country-select__option.is-selected {
  background: #eef7e0;
  font-weight: 600;
}

.gij-country-select__flag {
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}

.gij-country-select__empty {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-gij-muted, #aaa);
  text-align: center;
}

.players-wrapper .form-label,
.players-wrapper .fieldset-legend,
.players-wrapper .js-form-required {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* Wrapper */
.players-wrapper .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.players-wrapper .form-radios > .form-item {
  margin: 0;
  padding: 0;
  width: calc(50% - 0.25rem);
}
/* Hide native radio */
.players-wrapper .form-radios input[type="radio"] {
  display: none;
}

/* Default button look */
.players-wrapper .form-radios .form-check-label {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--color-gij-border, #d9d9d9);
  background: #fff;
  color: var(--color-gij-black, #000);
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s ease;
  text-align: center;
  height: 100%;
}
/* Active/checked state */
.players-wrapper .form-radios input[type="radio"]:checked + .form-check-label {
  border-color: var(--color-gij-green);
  background: var(--color-gij-green);
  color: #fff;
}

/* Hover */
.players-wrapper .form-radios .form-check-label:hover {
  border-color: var(--color-gij-green, #000);
}

label.form-check-label:has(> .rental-option-label) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 0.125rem;
}

label.form-check-label:has(> .rental-option-label) > .rental-option-label,
label.form-check-label:has(> .rental-option-label) > .rental-option-desc {
  display: block !important;
  width: 100%;
  text-align: left !important;
}

.rental-option-label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.rental-option-desc {
  font-weight: 500;
  font-size: 0.825rem;
  line-height: 1.3;

  cursor: pointer;
  opacity: 0.7;
}

input[type="radio"]:checked + .form-check-label .rental-option-desc {
  font-weight: 700;
}

/* Shaft Flex: hide the group label, show 4 options in a single row */
.players-wrapper .shaft-flex-field > label,
.players-wrapper .shaft-flex-field > .form-item__label,
.players-wrapper .shaft-flex-field > legend,
.players-wrapper .shaft-flex-radios > legend,
.players-wrapper .shaft-flex-radios > .fieldset-legend {
  display: none !important;
}

.players-wrapper .shaft-flex-field .form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.players-wrapper .shaft-flex-field .form-radios > .form-item {
  width: calc(25% - 0.375rem);
  margin: 0;
  padding: 0;
}

@media (max-width: 575px) {
  .players-wrapper .shaft-flex-field .form-radios > .form-item {
    width: calc(50% - 0.25rem);
  }
}
.player-card > .fieldset-wrapper > div:not(.field-md-half) {
  width: 100%;
}
.players-wrapper .shaft-flex-radios .form-radios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 767px) {
  .players-wrapper .shaft-flex-radios .form-radios {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.players-wrapper .shaft-flex-radios .form-radios > .form-item {
  width: 100%;
}

.number-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-gij-border, #d8d8d8);
  margin-bottom: 1rem;
  overflow: hidden;
}

.number-wrapper .number-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gij-light, #f7f7f7);
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0;
}

.number-wrapper .number-btn:hover {
  opacity: 0.8;
}

.number-wrapper .form-number {
  width: 2.5rem;
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-cond, sans-serif);
  font-weight: 900;
  font-size: 1.375rem;
  border: none;
  outline: none;
  padding: 0 0.25rem;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Hide browser arrows */
.number-wrapper .form-number::-webkit-outer-spin-button,
.number-wrapper .form-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*  */
.booking-players-header {
  margin-bottom: 2rem;
}
.booking-players-header h2 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--color-gij-black);
}
.booking-players-header p {
  font-size: 1rem;
  color: var(--color-gij-grey);
  margin-bottom: 0.75rem;
}
.booking-notice {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  background: rgb(240, 247, 255);
  border: 1px solid rgb(192, 216, 240);
  padding: 0.625rem 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(26, 74, 122);
}
.booking-notice .booking-info-box {
  flex: 1;
}
.booking-notice:before {
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBhdGggZD0iTTEyIDE2di00Ij48L3BhdGg+PHBhdGggZD0iTTEyIDhoLjAxIj48L3BhdGg+PC9zdmc+DQo=);
  display: block;
  width: 14px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}
.player-card {
  border-left: 3px solid var(--color-gij-green);
  padding-left: 20px;
  margin-bottom: 30px;
}
.player-card > legend.fieldset-legend {
  font-weight: 700;
  font-size: 1.125rem !important;
  text-transform: unset;
  margin-bottom: 0.125rem;
  color: var(--color-gij-black);
}
.contact-section-help,
/* Rental clubs help text — sits under the label, above the options. */
.rental-clubs-field .description,
.rental-clubs-field .form-item__description {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-gij-muted, #999);
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Safety net: ensure spacing holds even if the description's own
   margin-bottom collapses due to an in-between wrapper element. */
.rental-clubs-field .form-radios {
  margin-top: 0.75rem;
}

.contact-section-help strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gij-grey);
  margin-bottom: 0.25rem;
}
.contact-section-help p {
  font-size: 0.875rem;
  color: var(--color-gij-muted);
  margin-bottom: 0.5rem;
}

.players-wrapper .player-card > .fieldset-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.player-card > .fieldset-wrapper .fieldgroup {
  width: 100%;
}
@media (min-width: 768px) {
  .players-wrapper .fieldset-wrapper .field-md-half {
    width: calc(50% - 0.375rem);
  }
}

.form[class*="commerce-checkout"] .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.form[class*="commerce-checkout"] .form-actions:not(.golf-checkout-actions) input[type="submit"] {
  flex: 1;
  min-width: min(100%, 200px);
  background: var(--color-gij-black);
  color: #fff;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.16s ease-out,
    transform 0.1s ease-out;
  display: inline-flex;
  line-height: unset;
}

.form[class*="commerce-checkout"] .form-actions:not(.golf-checkout-actions) a {
  flex: 1;
  min-width: min(100%, 200px);
  color: var(--color-gij-black);
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid var(--color-gij-black);
  cursor: pointer;
  white-space: nowrap;
  background: 0 0;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.16s ease-out,
    color 0.16s ease-out,
    transform 0.1s ease-out;
  display: inline-flex;
}

.checkout-pane > legend.fieldset-legend {
  display: none;
}

/* Staff-only Players & Clubs quick editor.
 * This is a permission-gated Drupal link, not a customer booking control. It
 * is anchored to the actual Commerce checkout pane so staff can reach the
 * Booking content & communications editor directly from the form they edit.
 */
.checkout-pane-golf-billing-information {
  position: relative;
}

.checkout-pane-golf-billing-information .golf-booking-staff-edit-link {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-gij-border, #d9d9d9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-gij-grey, #888);
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color 0.15s ease-out, color 0.15s ease-out, background-color 0.15s ease-out;
}

.checkout-pane-golf-billing-information .golf-booking-staff-edit-link::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20h9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.checkout-pane-golf-billing-information .golf-booking-staff-edit-link:hover,
.checkout-pane-golf-billing-information .golf-booking-staff-edit-link:focus-visible {
  border-color: var(--color-gij-green, #7dc142);
  background: #fff;
  color: var(--color-gij-green-dark, #5b9a22);
  outline: none;
}
/*  */
form.golf-checkout-flow-payment_information .checkout-pane legend {
  display: none;
}
/* The Stripe mount point wrappers */
form.golf-checkout-flow-payment_information #card-number-element,
form.golf-checkout-flow-payment_information #expiration-element,
form.golf-checkout-flow-payment_information #security-code-element {
  width: 100% !important;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-gij-border);
  background: #fff;
  transition: border-color 0.15s ease;
}

form.golf-checkout-flow-payment_information #card-number-element.StripeElement--focus,
form.golf-checkout-flow-payment_information #expiration-element.StripeElement--focus,
form.golf-checkout-flow-payment_information #security-code-element.StripeElement--focus {
  border-color: var(--color-gij-green);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gij-green) 15%, transparent);
}

form.golf-checkout-flow-payment_information #card-number-element.StripeElement--invalid,
form.golf-checkout-flow-payment_information #expiration-element.StripeElement--invalid,
form.golf-checkout-flow-payment_information #security-code-element.StripeElement--invalid {
  border-color: #dc2626;
}
form.golf-checkout-flow-payment_information .stripe-form .form-group {
  margin-bottom: 0.75rem;
}

/* Put expiry and CVC in a row */
form.golf-checkout-flow-payment_information [id^="edit-payment-information-add-payment-method-payment-details-expiration"],
form.golf-checkout-flow-payment_information [id^="edit-payment-information-add-payment-method-payment-details-security-code"] {
  display: inline-block;
  width: calc(50% - 0.25rem);
}

form.golf-checkout-flow-review .field--name-billing-profile {
  display: none;
}

#payment-errors {
  margin-bottom: 16px;
}

.add-on-extra-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-gij-border);
}

.add-on-extra-row {
  display: flex;
  min-width: min(100%, 300px);
  align-items: center;
  flex: 1;
  gap: 10px;
}

.add-on-extra-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: var(--color-gij-light);
  overflow: hidden;
}

.add-on-extra-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.add-on-extra-info {
  flex: 1 1 0%;
  min-width: 0;
}

.add-on-extra-label {
  font-weight: 700;
  font-size: 1.0625rem;
}

.add-on-extra-subtitle {
  font-size: 0.875rem;
  color: var(--color-gij-grey);
}

.add-on-extra-price {
  font-family: var(--font-cond);
  font-weight: 900;
  font-size: 1.125rem;
  color: var(--color-gij-green);
  flex-shrink: 0;
}

.add-on-extra-item .add-on-qty {
  display: none; /* hidden value field; stepper controls it */
}

.add-on-extras-intro {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1.25rem;
}

/* +/− stepper matching the booking-page design */
.add-on-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--color-gij-border);
  flex-shrink: 0;
}
.add-on-stepper .add-on-step {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gij-light);
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  color: var(--color-gij-black);
}
.add-on-stepper .add-on-step:hover {
  background: var(--color-gij-border);
}
.add-on-stepper .add-on-step-count {
  min-width: 2rem;
  text-align: center;
  font-weight: 700;
  font-size: 1.0625rem;
}

@media (max-width: 991px) {
  .page__sidebar .golf-booking-cart-summary {
    margin-top: 30px;
  }
}

/* ── Checkout navigation: Back / Add-ons buttons (booking-page design) ── */
.golf-checkout-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-gij-border, #e5e5e5);
}

.golf-checkout-actions .golf-btn {
  flex: 1 1 0%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-transform: unset;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1.5px solid var(--color-gij-black, #111);
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.golf-checkout-actions a.golf-btn:hover,
.golf-checkout-actions a.golf-btn:focus {
  text-decoration: none;
}

/* Outlined (Back) */
.golf-checkout-actions .btn-outline,
form.golf-checkout-flow-review .yb-prev-wrap .btn {
  background: #fff;
  color: var(--color-gij-black, #111);
}
.golf-checkout-actions .btn-outline:hover {
  background: var(--color-gij-green);
  border-color: var(--color-gij-green);
  color: #fff;
}

form.golf-checkout-flow-review .yb-prev-wrap .btn {
  color: var(--color-gij-black);
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1.5px solid var(--color-gij-black) !important;
  cursor: pointer;
  white-space: nowrap;
  background: 0 0;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.16s ease-out,
    color 0.16s ease-out,
    transform 0.1s ease-out;
  display: inline-flex;
}
form.golf-checkout-flow-review .yb-prev-wrap .btn:hover {
  background-color: var(--color-gij-black);
  color: #ffffff;
}
form.golf-checkout-flow-review .yb-prev-wrap .btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 14px 14px;
  padding-left: 2.25rem;
}
form.golf-checkout-flow-review .yb-prev-wrap .btn:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 14px 14px;
  padding-left: 2.25rem;
}
/* Solid dark (Add-ons & Extras) */

/* Lucide arrows.
 *
 * <a> and <button> support ::before/::after, but <input type="submit">
 * (Drupal's default for the next/previous action buttons) does NOT — so for
 * inputs the arrow is drawn as a background-image with side padding instead.
 */

/* --- Pseudo-element arrows for <a>/<button> --- */
.golf-checkout-actions a.golf-btn--arrow-left::before,
.golf-checkout-actions button.golf-btn--arrow-left::before,
.golf-checkout-actions a.golf-btn--arrow-right::after,
.golf-checkout-actions button.golf-btn--arrow-right::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.golf-checkout-actions a.golf-btn--arrow-left::before,
.golf-checkout-actions button.golf-btn--arrow-left::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
}
.golf-checkout-actions a.golf-btn--arrow-right::after,
.golf-checkout-actions button.golf-btn--arrow-right::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* --- Background-image arrows for <input type="submit"> --- */
/* btn-dark inputs have white text, so use a white-stroked arrow. */
.golf-checkout-actions input.golf-btn--arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
  padding-right: 2.25rem;
}
.golf-checkout-actions input.golf-btn--arrow-right:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px 14px;
  padding-right: 2.25rem;
}

.golf-checkout-actions input.golf-btn--arrow-left {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 14px 14px;
  padding-left: 2.25rem;
}
.golf-checkout-actions input.golf-btn--arrow-left:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 14px 14px;
  padding-left: 2.25rem;
}
@media (max-width: 575px) {
  .golf-checkout-actions {
    flex-direction: column;
  }
}

/* ── Checkout page: default to Inter throughout ────────────────────── */
body.checkout-page,
body.checkout-page input,
body.checkout-page button,
body.checkout-page select,
body.checkout-page textarea {
  font-family: var(--font-sans, "Inter", ui-sans-serif, system-ui, sans-serif);
}

/* ═══════════════════════════════════════════════════════════════════════════
   YOUR BOOKING PANE  (golf_your_booking checkout pane)
   ═══════════════════════════════════════════════════════════════════════════ */

.your-booking-pane {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* Card wrapper */
.your-booking-card {
  max-width: 672px;
  margin: 0 auto;
  border: 1.2px solid var(--color-gij-border, #e5e5e5);
  padding: 2.1rem 2.4rem;
}
@media (max-width: 767px) {
  .your-booking-card {
    padding: 1.5rem 1.25rem;
  }
}
/* ── Typography helpers ─────────────────────────────────────────────────── */
.yb-main-heading {
  font-family: var(--font-cond, "Oswald", sans-serif);
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.25rem;
}

.yb-subtitle {
  font-size: 0.975rem;
  color: var(--color-gij-grey, #888);
  text-align: center;
  margin-bottom: 1rem;
}

.yb-section-heading {
  font-family: var(--font-cond, "Oswald", sans-serif);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1rem;
}

.yb-subsection-heading {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

/* ── Divider ────────────────────────────────────────────────────────────── */
.yb-divider {
  border: none;
  border-top: 1.2px solid var(--color-gij-border, #e5e5e5);
  margin: 1.2rem 0;
  opacity: 1;
  color: var(--color-gij-border, #e5e5e5);
}

/* ── Meta labels (green caps) ───────────────────────────────────────────── */
.yb-meta-label {
  font-size: 0.675rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gij-green, #7dc142);
  margin-bottom: 0.125rem;
}

.yb-meta-value {
  font-size: 1.05rem;
}

/* ── Booking reference ──────────────────────────────────────────────────── */
.yb-ref-block {
  margin-bottom: 0.75rem;
}

.yb-ref-display {
  display: inline-block;
  width: 100%;
  border: 1px solid var(--color-gij-border, #e5e5e5);
  padding: 0.375rem 0.625rem;
  font-family: monospace;
  font-size: 1.05rem;
  text-align: center;
}

/* ── Course block ───────────────────────────────────────────────────────── */
.yb-course-block {
  margin-bottom: 0.75rem;
}

.yb-course-name {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.yb-course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

/* ── Player / line rows ─────────────────────────────────────────────────── */
.yb-player-label {
  font-size: 0.675rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gij-green, #7dc142);
  display: block;
}

.yb-line-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.375rem;
}

.yb-line-row--small {
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}

.yb-line-desc {
  font-size: 1.05rem;
}

.yb-line-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-gij-green, #7dc142);
  white-space: nowrap;
}

/* ── Total row ──────────────────────────────────────────────────────────── */
.yb-total-row {
  border-top: 1px solid var(--color-gij-border, #e5e5e5);
  padding-top: 0.6rem;
  margin-bottom: 0.9rem;
  font-weight: 700;
  font-size: 1.2rem;
}

/* ── Total charged today (black box) ────────────────────────────────────── */
.yb-charged-box {
  background: var(--color-gij-black, #111);
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.yb-charged-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.yb-charged-sub {
  font-size: 0.825rem;
  color: rgba(255, 255, 255, 0.6);
}

.yb-charged-amount {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-gij-green, #7dc142);
}

/* ── Non-refundable deposit (bordered box) ──────────────────────────────── */
.yb-deposit-box {
  border: 1px solid var(--color-gij-border, #e5e5e5);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.yb-deposit-label {
  font-size: 1.05rem;
  font-weight: 700;
}

.yb-deposit-sub {
  font-size: 0.9rem;
  color: var(--color-gij-muted, #aaa);
}

.yb-deposit-amount {
  font-size: 1.2rem;
  font-weight: 700;
}

/* ── Cancellation policy ────────────────────────────────────────────────── */
.yb-policy-block {
  margin-bottom: 1rem;
}

.yb-policy-heading {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.yb-policy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yb-policy-list li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.375rem;
  font-size: 0.975rem;
  color: var(--color-gij-grey, #888);
}

.yb-policy-icon {
  font-weight: 700;
  flex-shrink: 0;
}

.yb-policy-icon--yes {
  color: var(--color-gij-green, #7dc142);
}
.yb-policy-icon--no {
  color: rgb(229, 62, 62);
}

.yb-policy-contact {
  font-size: 0.975rem;
  color: var(--color-gij-grey, #888);
  margin-top: 0.5rem;
}

.yb-policy-link {
  color: var(--color-gij-green, #7dc142);
}

/* ── T&C checkbox row ───────────────────────────────────────────────────── */
.yb-terms-row {
  margin-bottom: 1rem !important;
}

.yb-terms-row label {
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.975rem;
  color: var(--color-gij-grey, #888);
}

.yb-terms-row input[type="checkbox"] {
  width: 16.8px;
  height: 16.8px;
  margin-top: 0.1rem;
  accent-color: var(--color-gij-green, #7dc142);
  flex-shrink: 0;
  border-radius: 0;
  border: 1.2px solid rgba(0, 0, 0);
}

.yb-terms-row input[type="checkbox"]:checked {
  background-color: var(--color-gij-green, #7dc142);
}

/* ── Payment security note ──────────────────────────────────────────────── */
.yb-pay-note {
  font-size: 0.825rem;
  color: var(--color-gij-muted, #aaa);
  text-align: center;
  margin-top: 0.5rem;
}

/* ── Blue pay button ────────────────────────────────────────────────────── */
.golf-checkout-actions .btn-blue,
.golf-checkout-actions input.btn-blue[type="submit"] {
  background: oklch(0.67 0.11 248);
  color: #fff;
  border: none;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1rem;
  flex: 1 1 0%;
  border-radius: 0;
  transition: background 0.15s ease;
  white-space: break-spaces;
}

.golf-checkout-actions .btn-blue:hover,
.golf-checkout-actions input.btn-blue[type="submit"]:hover {
  background: oklch(0.6 0.13 248);
}

/* ── Contact section fields ─────────────────────────────────────────────── */
.yb-override-check {
  margin-bottom: 0.75rem;
}

.yb-override-check label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.975rem;
  color: var(--color-gij-grey, #888);
  cursor: pointer;
}

.yb-override-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-gij-green, #7dc142);
}

.yb-field-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.yb-contact-fields .yb-field {
  margin-bottom: 0.75rem;
}

.yb-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gij-grey);
  margin-bottom: 0.25rem;
}
@media (max-width: 767px) {
  .yb-field label {
    font-size: 0.625rem;
  }
}

/* ── Clubs / addons blocks spacing ─────────────────────────────────────── */
.yb-clubs-block,
.yb-addons-block {
  margin-bottom: 0.5rem;
}

/* ── Pay Securely button (inside .your-booking-card) ────────────────────── */
.yb-pay-btn {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  background: oklch(0.67 0.11 248);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  margin-bottom: 0.5rem;
  transition: background 0.15s ease;
}
.yb-pay-btn:hover {
  background: oklch(0.6 0.13 248);
}

/* ── Previous Page (centered below card) ────────────────────────────────── */
.yb-prev-wrap {
  text-align: center;
  margin-top: 1.25rem;
}
.yb-prev-btn {
  min-width: 200px;
  padding: 0.625rem 1.25rem;
  background: #fff;
  color: var(--color-gij-black, #111);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--color-gij-black, #111);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.yb-prev-btn::before {
  content: "";
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.yb-prev-btn:hover {
  background: var(--color-gij-green);
  color: #fff;
}

/* ── Hide standard Commerce actions bar on review step ──────────────────── */
.golf-checkout-actions--hidden {
  display: none !important;
}

.mw-200 {
  max-width: 200px;
}

/* ══════════════════════════════════════════════════════════════════════
   Golf Booking Completion — "Booking Confirmed" page
   ══════════════════════════════════════════════════════════════════════ */
.gij-complete-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gij-complete-card {
  background: #fff;
  border: 1px solid var(--color-gij-border, #d9d9d9);
  border-radius: 5px;
  max-width: 33.6rem;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-sans, "Inter", sans-serif);
}

.gij-complete-head {
  background: var(--color-gij-black, #0c0c0c);
  padding: 2.4rem;
  text-align: center;
}

.gij-complete-brand {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.gij-complete-brand img {
  display: block;
  width: min(176px, 78%);
  height: auto;
}

.gij-complete-title {
  font-family: var(--font-cond, sans-serif);
  font-weight: 900;
  font-size: 2.1rem;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin: 0 0 0.6rem;
}

.gij-complete-paid {
  color: var(--color-gij-green);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.gij-complete-body {
  padding: 1.8rem;
}

.gij-complete-intro {
  color: var(--color-gij-grey, #777);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.gij-complete-details {
  border: 1px solid var(--color-gij-border, #d9d9d9);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.gij-ref-row {
  background: var(--color-gij-black, #0c0c0c);
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--color-gij-green);
}

.gij-ref-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.gij-ref-value {
  font-family: monospace;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

.gij-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--color-gij-border, #d9d9d9);
  color: var(--color-gij-green);
}
.gij-detail-row:last-child {
  border-bottom: none;
}

.gij-detail-row svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex-shrink: 0;
}

.gij-detail-label {
  font-size: 12px;
  color: var(--color-gij-muted, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
}
.gij-detail-label--on-dark {
  color: rgba(255, 255, 255, 0.5);
}

.gij-detail-value {
  font-weight: 600;
  color: var(--color-gij-black, #0c0c0c);
}

.gij-players-list div {
  font-size: 1.05rem;
  color: var(--color-gij-grey, #777);
}

.gij-seats-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.2rem;
  background: #eef7e0;
  color: var(--color-gij-green);
}
.gij-seats-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.gij-seats-banner span {
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d6a2d;
}

/* Public event itinerary only; booking-specific transport remains private. */
.gij-complete-itinerary {
  border-top: 3px solid var(--color-gij-green, #66b500);
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.2rem 0;
}
.gij-complete-itinerary h2 {
  color: var(--color-gij-black, #0c0c0c);
  font-family: var(--font-cond, sans-serif);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .03em;
  margin: 0 0 .8rem;
  text-transform: uppercase;
}
.gij-complete-itinerary__rows {
  border-top: 1px solid var(--color-gij-border, #d9d9d9);
}
.gij-complete-itinerary__row {
  align-items: baseline;
  border-bottom: 1px solid var(--color-gij-border, #d9d9d9);
  display: grid;
  gap: .9rem;
  grid-template-columns: 4.5rem 1fr;
  padding: .72rem 0;
}
.gij-complete-itinerary__row time {
  color: var(--color-gij-green, #66b500);
  font-size: .9rem;
  font-weight: 700;
}
.gij-complete-itinerary__row span {
  color: var(--color-gij-black, #0c0c0c);
  line-height: 1.45;
}

.gij-contact-line {
  font-size: 0.9rem;
  color: var(--color-gij-muted, #aaa);
  text-align: center;
  margin: 0 0 1.5rem;
}
.gij-contact-line a {
  color: var(--color-gij-green);
  text-decoration: none;
}

.gij-complete-cta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--color-gij-green);
  color: var(--color-gij-black);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 2.4px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
}
.gij-complete-cta svg {
  width: 17px;
  height: 17px;
}
.gij-complete-cta:hover {
  background: var(--color-gij-green-dark, var(--color-gij-green));
  color: var(--color-gij-black);
}

/* ══════════════════════════════════════════════════════════════════════
   Stripe Elements (Card number / Expiration / CVC) — match .gij-input
   ══════════════════════════════════════════════════════════════════════
   Stripe.js auto-applies the base ".StripeElement" class (plus state
   modifiers) to whichever div each element is mounted into, regardless of
   its id — so targeting ".StripeElement" here works even if the module's
   mount-point ids change between versions.
*/
.StripeElement {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans, "Inter", sans-serif);
  color: var(--color-gij-black, #0c0c0c);
  border: 1px solid var(--color-gij-border, #d9d9d9);
  background: #fff;
  border-radius: 2px;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s ease-out;
}

.StripeElement--focus {
  border-color: var(--color-gij-green);
}

.StripeElement--invalid {
  border-color: var(--color-red-500, #e5484d);
}

.StripeElement--webkit-autofill {
  background-color: #fefde5;
}

/* Field labels above each Stripe element ("Card number", "Expiration
   date", "CVC") — match the rest of the form's label style. */
.payment-method-add-form label,
#payment-information label {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-gij-black, #0c0c0c);
  margin-bottom: 0.375rem;
  display: block;
}

/* Every required field on this checkout flow already has "*" typed
   directly into its #title to match the exact wording used in the HTML
   design (e.g. "Email *", "Rental Clubs*"). Drupal's theme also
   auto-appends its own required-indicator span whenever #required is
   TRUE, which would show as a second "*" next to ours — hide it. */
.form-required--indicator {
  display: none;
}

@media (max-width: 767px) {
  .checkout-page .page__main_content {
    padding-top: 0.625rem;
  }
  .yb-field-row-2col {
    grid-template-columns: 1fr;
  }
  .players-wrapper .form-radios .form-check-label {
    font-size: 0.75rem;
  }
  .rental-option-label {
    font-size: 0.75rem;
  }
  .rental-option-desc {
    font-size: 0.625rem;
  }
}



.error.form-control.iti__tel-input {
  color: red!important;
  border-color: red!important;
  background-image: none!important;
}

.iti__country-container {
  max-height: 42px;
}

/* ── Simplified post-payment confirmation ─────────────────────────────── */
.gij-complete-head {
  padding: 2rem 1.5rem;
}

.gij-complete-brand img {
  width: min(190px, 82%);
}

.gij-complete-title {
  margin-bottom: 0;
}

.gij-complete-body {
  padding: 1.75rem;
}

.gij-complete-intro {
  margin: 0 0 1.25rem;
  text-align: center;
}

.gij-complete-summary {
  margin: 0 0 1.5rem;
  border: 1px solid var(--color-gij-border, #d9d9d9);
  border-radius: 5px;
  overflow: hidden;
}

.gij-complete-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}

.gij-complete-summary__row + .gij-complete-summary__row {
  border-top: 1px solid var(--color-gij-border, #d9d9d9);
}

.gij-complete-summary dt {
  color: var(--color-gij-grey, #777);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gij-complete-summary dd {
  margin: 0;
  color: var(--color-gij-black, #0c0c0c);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: right;
}

@media (max-width: 575px) {
  .gij-complete-head,
  .gij-complete-body {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .gij-complete-title {
    font-size: 1.8rem;
  }

  .gij-complete-summary__row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .gij-complete-summary dd {
    text-align: left;
  }
}