/* KL Course Booking front end. Date cards use the site's kl-cdates__* styles; this adds the booking panel and checkout attendees. */
.klcb-booking .kl-section-head { margin-bottom: var(--kl-space-5, 24px); }
.klcb-book.kl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kl-space-6, 32px); padding: var(--kl-space-6, 32px); background: var(--kl-white, #fff); border: 1px solid var(--kl-border, #ccd6dd); border-radius: var(--kl-radius-lg, 14px); }
.klcb-book p { margin: 0 0 var(--kl-space-2, 8px); }
.klcb-book__date { font-family: var(--kl-font-display); font-weight: var(--kl-weight-display, 600); font-size: var(--kl-text-h3, 22px); color: var(--kl-heading, #1a6291); }
.klcb-book__form { display: flex; flex-direction: column; gap: var(--kl-space-3, 12px); align-items: flex-start; }
.klcb-book__form .kl-field { min-width: 160px; }
.klcb-book__total { font-size: var(--kl-text-lead, 18px); color: var(--kl-ink, #0d3e5b); }
.klcb-left { display: inline-block; padding: 2px 10px; border-radius: var(--kl-radius-pill, 999px); background: var(--kl-level-intermediate, #f9dfab); color: var(--kl-ink, #0d3e5b); font-size: var(--kl-text-sm, 13px); white-space: nowrap; }
.kl-cdates__row.is-selected { border-color: var(--kl-dark-blue, #1a6291); }
.kl-cdates__option.is-selected { border-color: var(--kl-dark-blue, #1a6291); box-shadow: inset 0 0 0 1px var(--kl-dark-blue, #1a6291); }
.klcb-dates { margin-top: 0; }
.klcb-attendees { margin-bottom: 32px; }
.klcb-attendees__course { margin-bottom: 16px; }
.klcb-person { margin: 0 0 16px; padding: 12px 16px 4px; border: 1px solid var(--kl-border, #ccd6dd); border-radius: var(--kl-radius, 8px); }
.klcb-person legend { padding: 0 6px; font-weight: var(--kl-weight-bold, 700); }
.klcb-person .form-row { margin-bottom: 10px; }
.klcb-person input.input-text { width: 100%; }
@media (max-width: 767px) {
  .klcb-book.kl-card { grid-template-columns: minmax(0, 1fr); padding: var(--kl-space-5, 24px); }
}
/* Timetable ([kl_timetable]) */
.klcb-tt__filters { display: flex; flex-wrap: wrap; gap: var(--kl-space-4, 16px); margin: 0 0 var(--kl-space-4, 16px); }
.klcb-tt__filters .kl-field { min-width: 200px; flex: 1 1 200px; max-width: 280px; }
.klcb-tt__count { margin: 0 0 var(--kl-space-3, 12px); color: var(--kl-text, #0d3e5b); font-size: var(--kl-text-sm, 13px); }
.klcb-tt__list { margin: 0; }
.klcb-tt__row[hidden], .klcb-tt__option[hidden] { display: none; }
/* Rows share the booking page's klcb-row look; the timetable adds the course after the times */
.klcb-row.klcb-row--tt { grid-template-columns: 150px 130px minmax(0, 1fr) 95px 200px 215px; }
.klcb-tt__name { text-decoration: none; }
.klcb-tt__name:hover, .klcb-tt__name:focus-visible { text-decoration: underline; }
.klcb-row--tt .klcb-tt__option[hidden] { display: flex; visibility: hidden; } /* keeps the columns lined up when filtered by delivery */
.klcb-tt__course { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.klcb-tt__name { font-weight: var(--kl-weight-bold, 700); color: var(--kl-link, #1a6291); }
.klcb-tt__meta { color: var(--kl-text, #0d3e5b); font-size: var(--kl-text-sm, 13px); }
@media (max-width: 1099px) {
  .klcb-row.klcb-row--tt { grid-template-columns: minmax(0, 1fr) auto; }
  .klcb-row--tt .klcb-tt__course { grid-column: 1 / -1; grid-row: 2; }
  .klcb-row--tt .klcb-row__time { grid-column: 1; grid-row: 3; }
  .klcb-row--tt .klcb-row__price { grid-column: 2; grid-row: 3; }
  .klcb-row--tt .klcb-tt__option[hidden] { display: none; }
}

/* Booking page hero: the site's kl-hero (as on the Articulate page) with the course illustration */
.klcb-hero .kl-hero__photo.klcb-hero__illustration { object-fit: contain; object-position: 70% 55%; padding: 32px 4% 32px 22%; background: transparent; }
/* Guarantees: three tick pills straight under the badges, on one line where there's room */
.klcb-hero .kl-hero__badges + .klcb-hero__promises { margin-top: calc(var(--kl-space-3, 12px) - var(--kl-space-5, 24px)); }
.klcb-hero .klcb-hero__promises { gap: var(--kl-space-2, 8px); }
.klcb-hero__promises .kl-hero__badge { gap: 6px; padding-inline: 10px 12px; }
.kl-hero__badge.klcb-badge--tick { --kl-badge-icon: var(--kl-tick-icon); }

/* The hero card: the chosen session and checkout (or the price and "Choose a date"). It sits in the hero's
   second column over the photo, and below the text on tablets and phones (where it stays visible). */
.klcb-hero-card { position: relative; z-index: 2; justify-self: end; align-self: center; display: flex; flex-direction: column; gap: var(--kl-space-4, 16px); width: 100%; max-width: 360px; padding: 24px; background: var(--kl-white, #fff); border-radius: var(--kl-radius-lg, 14px); box-shadow: var(--kl-shadow-float); animation: kl-card-in .7s .45s cubic-bezier(.2,.7,.2,1) both; scroll-margin-top: calc(var(--kl-header-height, 80px) + 16px); }
.klcb-hero-card p { margin: 0; }
.klcb-hero-card__session { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--kl-space-4, 16px); border-bottom: 1px solid var(--kl-border, #ccd6dd); }
.klcb-hero-card__session .kl-eyebrow { margin-bottom: 4px; }
/* Session details as icon rows, after Brendon's mockup (27 Oct 2026): date in Ink, then time, place and format, a small address, then the seats pill */
.klcb-hero-card__session .klcb-book__date { margin-bottom: 8px; font-size: 20px; line-height: 1.25; color: var(--kl-ink, #0d3e5b); }
.klcb-sess { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.klcb-sess__row { display: flex; align-items: flex-start; gap: 12px; margin: 0; color: var(--kl-ink, #0d3e5b); line-height: 1.35; }
.klcb-sess__row svg { flex: none; margin-top: -1px; color: var(--kl-text-muted, #4a5d6b); }
.klcb-hero-card .klcb-sess__address { margin-top: 8px; font-size: var(--kl-text-sm, 13px); color: var(--kl-text-muted, #4a5d6b); }
.klcb-hero-card__session .klcb-avail { margin-top: 8px; }
.klcb-hero-card .klcb-book__form { gap: var(--kl-space-3, 12px); align-items: stretch; }
.klcb-hero-card .klcb-hero-card__qty { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--kl-space-3, 12px); min-width: 0; }
.klcb-hero-card .klcb-hero-card__qty label { margin: 0; text-align: left; white-space: nowrap; color: var(--kl-ink, #0d3e5b); }
.klcb-hero-card #klcb-qty { flex: none; width: 84px; min-width: 0; max-width: 84px; text-align: center; text-align-last: center; }
.klcb-hero-card__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; color: var(--kl-text, #0d3e5b); }
.klcb-hero-card__total strong { font-family: var(--kl-font-display); font-weight: var(--kl-weight-display, 600); font-size: 26px; line-height: 1.15; color: var(--kl-ink, #0d3e5b); }
/* Course fee and total including GST: labels left, amounts right (Brendon, 27 Oct 2026) */
.klcb-price { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.klcb-price__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.klcb-price dt, .klcb-price dd { margin: 0; color: var(--kl-text, #0d3e5b); }
.klcb-price dd { text-align: right; white-space: nowrap; }
.klcb-price__row--total { padding-top: 8px; border-top: 1px solid var(--kl-border, #ccd6dd); }
.klcb-price__row--total dt { font-weight: var(--kl-weight-bold, 700); }
.klcb-price__row--total dd { font-family: var(--kl-font-display); font-weight: var(--kl-weight-display, 600); font-size: 26px; line-height: 1.15; color: var(--kl-ink, #0d3e5b); }
.klcb-hero-card__submit { justify-content: center; width: 100%; }
/* Seats available in the chosen session: green pill, amber at 3 or fewer */
.klcb-avail { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: var(--kl-radius-pill, 999px); background: var(--kl-level-intro, #c6ebd2); color: var(--kl-ink, #0d3e5b); font-size: var(--kl-text-sm, 13px); font-weight: var(--kl-weight-bold, 700); white-space: nowrap; }
.klcb-avail--low { background: var(--kl-level-intermediate, #f9dfab); }
/* Logo card on the photo (product logo and maker's wordmark side by side), like the course page hero's */
.klcb-hero-side { position: relative; z-index: 2; justify-self: end; align-self: center; display: flex; flex-direction: column; align-items: stretch; gap: var(--kl-space-4, 16px); width: 100%; max-width: 360px; }
.klcb-hero-side .klcb-hero-card { justify-self: auto; align-self: auto; max-width: none; }
.klcb-hero__brand { align-self: stretch; justify-content: center; display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--kl-white, #fff); border-radius: var(--kl-radius-lg, 14px); box-shadow: var(--kl-shadow-float); animation: kl-card-in .7s .6s cubic-bezier(.2,.7,.2,1) both; }
.klcb-hero__brand-logo { display: block; width: 48px; height: 48px; object-fit: contain; }
.klcb-hero__brand-wordmark { display: block; width: 150px; height: auto; }
@media (max-width: 899px) {
  .klcb-hero__brand { display: none; }
}
.klcb-hero-card__notices .woocommerce-error, .klcb-hero-card__notices .woocommerce-message, .klcb-hero-card__notices .woocommerce-info { margin: 0; }
.klcb-hero .kl-hero__copy { padding-bottom: var(--kl-space-4, 16px); }
/* Desktop: the card sits near the text and the photo is anchored to its right edge, so the laptop
   shows beside the card (all of it on wide screens). Tuned for the course booking photo (WooCommerce's placeholder image). */
@media (min-width: 900px) {
  .klcb-hero-side { justify-self: start; margin-left: var(--kl-space-7, 48px); }
  .klcb-hero .kl-hero__photo:not(.klcb-hero__illustration) { object-position: 65% 50%; } /* the course booking photo's laptop beside the card (Brendon, 29 Oct 2026) */
}
/* Wide screens: the photo is placed by its own right edge and scaled up a little, so the laptop's
   top-left corner tucks just under the card; its fade starts at the photo's own edge, so no hard line
   shows whatever the hero's height (Brendon, 26 Oct 2026) */
@media (min-width: 1600px) {
  .klcb-hero .kl-hero__visual { left: 0; width: auto; overflow: hidden; }
  .klcb-hero .kl-hero__photo:not(.klcb-hero__illustration) { top: -4%; right: 0; bottom: auto; left: auto; width: auto; height: 108%; max-width: none; object-fit: fill; -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 22%, black 62%); mask-image: linear-gradient(to right, transparent 0, transparent 22%, black 62%); }
}
@media (min-width: 1921px) {
  .klcb-hero .kl-hero__photo:not(.klcb-hero__illustration) { -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 22%, black 62%, black 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, transparent 22%, black 62%, black 85%, transparent 100%); }
}
/* Hero only as tall as its content, so "Other dates" starts sooner */
@media (min-width: 900px) {
  .klcb-hero.kl-section { padding-bottom: var(--kl-space-6, 32px); }
  .klcb-hero .kl-hero__inner { min-height: 0; }
  .klcb-hero .kl-hero__copy { padding-bottom: 0; }
}
@media (max-width: 899px) {
  .klcb-hero-side { justify-self: stretch; max-width: none; margin-top: var(--kl-space-6, 32px); }
}

/* Booking page date list: one compact row per date, in-person and live online slots side by side */
.klcb-dates__intro { margin: 0 0 var(--kl-space-3, 12px); color: var(--kl-text, #0d3e5b); }
/* Team bookings: a white panel under the dates with the quote button (27 Oct 2026) */
.klcb-team { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kl-space-4, 16px) var(--kl-space-6, 32px); margin-top: var(--kl-space-5, 24px); padding: var(--kl-space-5, 24px); background: var(--kl-white, #fff); border: 1px solid var(--kl-border, #ccd6dd); border-radius: var(--kl-radius-lg, 14px); }
.klcb-team__text { flex: 1 1 360px; }
.klcb-team__title { margin: 0 0 var(--kl-space-1, 4px); }
.klcb-team p { margin: 0; color: var(--kl-text, #0d3e5b); }
.klcb-team__btn { flex: none; }
@media (max-width: 599px) { .klcb-team__btn { width: 100%; justify-content: center; } }
.klcb-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.klcb-row { display: grid; grid-template-columns: 160px 130px 90px minmax(0, 1fr) minmax(0, 1fr); gap: var(--kl-space-3, 12px); align-items: center; margin: 0; padding: 8px 12px; background: var(--kl-white, #fff); border: 1px solid var(--kl-border, #ccd6dd); border-radius: var(--kl-radius, 8px); box-shadow: 0 1px 2px rgba(13, 62, 91, .06); }
.klcb-row[hidden] { display: none; }
.klcb-row__when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.klcb-row__date { display: inline-flex; align-items: center; gap: 10px; color: var(--kl-ink, #0d3e5b); }
.klcb-row__date::before, .klcb-row__place::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--kl-accent); -webkit-mask: var(--klcb-icon) center / contain no-repeat; mask: var(--klcb-icon) center / contain no-repeat; }
.klcb-row__date { --klcb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.klcb-row__place { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.klcb-row__place { --klcb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.klcb-row__where { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; color: var(--kl-text, #0d3e5b); }
.klcb-row .kl-cdates__next { margin: 0; }
.klcb-row__time { color: var(--kl-text, #0d3e5b); white-space: nowrap; }
.klcb-row__price { color: var(--kl-ink, #0d3e5b); white-space: nowrap; }
.klcb-row__option { display: flex; align-items: center; justify-content: flex-end; gap: var(--kl-space-3, 12px); min-width: 0; }
.klcb-row__option .kl-btn { flex: none; min-width: 88px; justify-content: center; }
/* The chosen session's row: Light Blue edge, and "Selected" where its Book button would be (27 Oct 2026) */
.klcb-row--current { border-color: var(--kl-light-blue, #149bd0); box-shadow: inset 4px 0 0 var(--kl-light-blue, #149bd0); }
.klcb-row__selected { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: var(--kl-control-height-sm, 44px); padding: 0 12px; border-radius: var(--kl-radius, 8px); background: var(--kl-mist, #eaf5f9); color: var(--kl-dark-blue, #1a6291); font-weight: var(--kl-weight-bold, 700); font-size: var(--kl-text-sm, 13px); }
.klcb-more { margin: var(--kl-space-4, 16px) 0 0; }
.klcb-more .kl-btn--secondary { background: var(--kl-white, #fff); }
@media (max-width: 1099px) {
  .klcb-row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 8px; }
  .klcb-row__when { grid-column: 1 / -1; }
  .klcb-row__time { grid-column: 1; }
  .klcb-row__price { grid-column: 2 / -1; justify-self: end; }
  .klcb-row__option { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--kl-border, #ccd6dd); }
  .klcb-row__option--none { display: none; }
}
/* Before you come / What's included / What we'll email: kl-way cards (as in "Choose how you want to learn")
   with a line icon in place of the photo; two or three across */
.klcb-info-section .klcb-info { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding-top: 0; }
.klcb-info-section .kl-way { padding: 24px 20px 28px; }
.klcb-info__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 var(--kl-space-2, 8px); border-radius: var(--kl-radius-pill, 999px); background: var(--kl-light-20, #e3f1fa); color: var(--kl-dark-blue, #1a6291); }
.klcb-info__card .kl-way__title { margin: 0; }
.klcb-info__card .kl-way__tick { align-items: flex-start; }
.klcb-info__card .kl-way__tick::before { margin-top: -1px; }
.klcb-emailed__notes { padding: 0 var(--kl-space-2, 8px); }
.klcb-emailed__notes { margin-top: var(--kl-space-3, 12px); }
.klcb-terms a { color: var(--kl-link, #1a6291); text-decoration: underline; text-underline-offset: 2px; }
.klcb-terms a:hover { text-decoration-thickness: 2px; }
/* Course details link on the left, booking terms on the right, one line where there is room */
.klcb-links { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--kl-space-3, 12px) var(--kl-space-5, 24px); margin: var(--kl-space-5, 24px) 0 var(--kl-space-2, 8px); }
.klcb-links .klcb-terms { margin: 0; }