/* Final, isolated authority for the legacy booking widget. */
#pjForm [id^="pjWrapperTicketBooking_"] {
  position: relative;
}

/* The map already communicates the next action; keep the duplicated inline guide out of
   the ticket card on the seat-selection page. */
.tbSelectSeatGuide {
  display: none !important;
  visibility: hidden !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#pjForm [id^="pjWrapperTicketBooking_"].pjCbIsLoading,
#pjForm [id^="tbContainer_"].pjCbIsLoading {
  cursor: progress;
}

#pjForm [id^="pjWrapperTicketBooking_"].pjCbIsLoading::before,
#pjForm [id^="tbContainer_"].pjCbIsLoading::before {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 32%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #986540, transparent);
  content: "";
  pointer-events: none;
  animation: pjCbRouteProgress 900ms ease-in-out infinite;
}

@keyframes pjCbRouteProgress {
  from { transform: translateX(-110%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  #pjForm [id^="pjWrapperTicketBooking_"].pjCbIsLoading::before,
  #pjForm [id^="tbContainer_"].pjCbIsLoading::before {
    width: 100%;
    animation: none;
  }
}

/* Immediate first-paint placeholder while the legacy booking widget boots. */
#pjForm .korso-booking-bootstrap {
  overflow: hidden;
  min-height: 520px;
  border: 1px solid rgba(152, 101, 64, 0.16);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.78);
}

/* The empty schedule (and the closed-Monday notice) is a short inline state, measured
   at 323px desktop / 455px mobile on the booted widget. */
#pjForm .korso-booking-bootstrap--empty {
  min-height: 323px;
}

#pjForm .korso-booking-bootstrap__heading {
  display: flex;
  align-items: center;
  min-height: 104px;
  padding: 24px clamp(24px, 5vw, 62px);
  border-bottom: 1px solid rgba(34, 31, 32, 0.1);
}

#pjForm .korso-booking-bootstrap__message {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #6f6863;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

#pjForm .korso-booking-bootstrap__message::before {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(152, 101, 64, 0.25);
  border-top-color: #986540;
  border-radius: 50%;
  content: "";
  animation: korsoBookingSpin 800ms linear infinite;
}

#pjForm .korso-booking-bootstrap__body {
  padding: 47px clamp(24px, 5vw, 62px);
}

  /* Sized to a real schedule row, so the widget does not move the page when it replaces this
     placeholder. The row count comes from the schedule itself (see $korso_skeleton_rows in
     lv/index.php); the heights below are measured, never derived.

     Re-measured after the mobile card redesign moved the rows: a desktop .pjCbEventRow is
     294px + a 46px gap, and a mobile one 451px + a 35px gap. The previous figures (306px and
     374px) were correct when written and had gone stale - the placeholder then reserved about
     1,000px less than the list needed on mobile, which surfaced as a large layout shift once
     the lighter WebP posters started arriving in one block instead of trickling in.

     Measure it the same way next time: block booking-proxy.php so the widget never replaces
     the placeholder and compare this block against the rendered list. */
  #pjForm .korso-booking-bootstrap__movie {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px);
    min-height: 340px;   /* 294px row + 46px gap */
    padding-bottom: 46px;
  }

#pjForm .korso-booking-bootstrap__poster,
#pjForm .korso-booking-bootstrap__line,
#pjForm .korso-booking-bootstrap__button {
  background: rgba(152, 101, 64, 0.1);
  animation: korsoBookingPulse 1.25s ease-in-out infinite alternate;
}

#pjForm .korso-booking-bootstrap__poster {
  width: 176px;
  height: 248px;
  border-radius: 18px;
}

#pjForm .korso-booking-bootstrap__copy {
  padding-top: 8px;
}

#pjForm .korso-booking-bootstrap__line {
  height: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

#pjForm .korso-booking-bootstrap__line--title { width: min(430px, 72%); height: 24px; }
#pjForm .korso-booking-bootstrap__line--short { width: 42%; }
#pjForm .korso-booking-bootstrap__line--medium { width: 78%; }
#pjForm .korso-booking-bootstrap__button {
  width: 280px;
  height: 54px;
  margin-top: 28px;
  border-radius: 999px;
}

@keyframes korsoBookingSpin {
  to { transform: rotate(360deg); }
}

@keyframes korsoBookingPulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (max-width: 767px) {
  #pjForm .korso-booking-bootstrap {
    min-height: 570px;
    border-radius: 24px;
  }

  #pjForm .korso-booking-bootstrap--empty {
    min-height: 455px;
  }

  #pjForm .korso-booking-bootstrap__heading {
    min-height: 208px;   /* the widget's mobile heading carries the week strip + date picker */
    padding: 24px 28px;
  }

  #pjForm .korso-booking-bootstrap__body {
    padding: 33px 28px;
  }

  #pjForm .korso-booking-bootstrap__movie {
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 22px;
    min-height: 486px;   /* measured: the height a mobile .pjCbEventRow settles at (451px) + its 35px gap */
    padding-bottom: 35px;
  }

  #pjForm .korso-booking-bootstrap__poster {
    width: 126px;
    height: 190px;
    border-radius: 14px;
  }

  #pjForm .korso-booking-bootstrap__line--title { width: 90%; }
  #pjForm .korso-booking-bootstrap__button { width: min(230px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  #pjForm .korso-booking-bootstrap__message::before,
  #pjForm .korso-booking-bootstrap__poster,
  #pjForm .korso-booking-bootstrap__line,
  #pjForm .korso-booking-bootstrap__button {
    animation: none;
  }
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview {
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr) !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(152, 101, 64, 0.16);
  border-radius: 24px;
  background: rgba(247, 245, 241, 0.72);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .well {
  min-height: 210px;
  padding: 30px 34px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.75fr) minmax(0, 1.35fr) !important;
  align-content: start;
  align-items: stretch;
  justify-content: stretch;
  gap: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard .pjCbSeatsTitle {
  box-sizing: border-box;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 82px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(23, 22, 21, 0.075);
  font-size: clamp(1.875rem, 2.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: auto !important;
  min-height: 52px;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-left: 1px solid rgba(23, 22, 21, 0.09) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row:first-of-type {
  padding-left: 0 !important;
  border-left: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row:last-child {
  padding-right: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo + .pjCbSeatsInfo {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:first-child {
  margin-bottom: 6px !important;
  color: #766e67;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.2;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:last-child {
  color: var(--korso-ink);
  font-size: 1rem;
  line-height: 1.2;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start;
  align-items: stretch;
  justify-content: stretch;
  gap: 0 !important;
  padding-left: 38px !important;
  border-left: 1px solid rgba(23, 22, 21, 0.09) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard > .row {
  width: 100% !important;
  margin: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .alert {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 82px;
  min-height: 82px;
  margin: 0 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard > .row + .row {
  padding-top: 0;
  border-top: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard p.text-muted {
  margin-bottom: 16px !important;
  line-height: 1.3;
}

/* Reserve room for the first selected seat chip inside the ticket card. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard [id^="tbSelectedSeats_"] {
  min-height: 33px;
}

@media only screen and (prefers-reduced-motion: no-preference) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .tbAssignedSeats,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .tbAssignedNoMap {
    animation: pjCbChipIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@keyframes pjCbChipIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbFormSeats .form-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbFormSeats .form-group::before,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbFormSeats .form-group::after {
  display: none !important;
  content: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbFormSeats .form-group > .col-sm-6 {
  position: relative;
  flex: 0 0 52px;
  width: 52px !important;
  height: 46px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(23, 22, 21, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(36, 27, 20, 0.08);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbFormSeats .form-group > .col-sm-6::after {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--korso-ink);
  border-bottom: 1.5px solid var(--korso-ink);
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbFormSeats .form-group > .col-sm-6:focus-within {
  border-color: var(--korso-bronze);
  box-shadow: 0 0 0 3px rgba(152, 101, 64, 0.14);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard > .row + .row > [class*="col-"] {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard > .row + .row > [class*="col-"] + [class*="col-"] {
  margin-top: 24px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .tbTicketSelector {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  width: 52px !important;
  min-width: 52px !important;
  height: 46px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  text-align-last: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .tbTicketSelector option {
  color: var(--korso-ink);
  background: #fff;
  text-align: center;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbTicketValue {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  color: var(--korso-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbFormSeats .control-label {
  width: auto !important;
  margin: 0;
  padding: 0 !important;
  white-space: nowrap;
  line-height: 46px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtnLabel {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtnPrimary::after {
  display: none !important;
  content: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtnPrimary {
  gap: 8px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtnArrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .row > .col-xs-12 {
  flex-wrap: wrap;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .tbErrorMessage {
  flex: 0 0 100%;
  order: -1;
}

@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtn {
    flex: 1 1 auto;
    min-width: 0;
    width: calc(50% - 6px);
  }
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsPoster {
  display: none;
  overflow: hidden;
  margin: 0;
  border-radius: 14px;
  background: #ece8e2;
  box-shadow: 0 10px 24px rgba(36, 27, 20, 0.14);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsPoster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 94px minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 20px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    display: block;
    grid-column: 1;
    grid-row: 1 / 4;
    width: 94px;
    height: 141px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-column: 2 / -1;
    grid-row: 1;
    margin-bottom: 18px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) {
    grid-column: 2;
    grid-row: 2;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2) {
    grid-column: 3;
    grid-row: 2;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) {
    grid-column: 2 / -1;
    grid-row: 3;
    min-height: 50px;
    padding: 10px 0 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
  }
}

/* The seat-ticket mobile grid rules also match checkout's payment rows. Reset
   those selector-specific margins there so totals do not acquire ticket-card
   spacing intended for Adult/Child controls. */
/* Preview alignment: use the same three-card top row and full-width lower
   rhythm as the checkout screen. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"] > .well {
    height: 317px !important;
    min-height: 317px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard {
    height: 317px !important;
    min-height: 317px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbFormTitle {
    padding: 18px 30px 12px 42px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbCName) {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbCName) > [class*="col-"] .form-group {
    margin-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .form-group.required {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .checkbox.pjCbTermsConsent {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPayment {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: max-content max-content;
    gap: 18px !important;
    padding: 18px 20px 34px !important;
    align-items: stretch;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewPayment,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSeller {
    grid-row: 1 !important;
    height: 100%;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary {
    grid-column: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewPayment {
    grid-column: 2 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSeller {
    grid-column: 3 !important;
    display: block !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewBuyer {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: auto !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary .pjCbPaymentTitle {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSeller .pjCbPaymentTitle {
    min-height: 0;
    margin: 0 0 10px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSeller > div {
    width: 100%;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewPayment > .form-horizontal:last-child {
    border-color: rgba(23, 22, 21, 0.11);
    background: rgba(152, 101, 64, 0.075);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewBuyer {
    align-items: center;
  }
}

@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row + .row {
    gap: 0 !important;
    margin-top: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row > [class*="col-"],
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row > [class*="col-"] + [class*="col-"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"] + [class*="col-"] {
    margin-top: 0 !important;
  }
}


@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview {
    grid-template-columns: 1fr !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .well {
    min-height: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard {
    padding-left: 34px !important;
    border-top: 1px solid rgba(23, 22, 21, 0.09) !important;
    border-left: 0 !important;
  }
}

/* Final checkout stack authority: the seat page keeps its own desktop offset,
   while checkout cards must follow one explicit, stable vertical rhythm. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview::before,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview::after {
    display: none !important;
    content: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > .pjCbTicketSummary {
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
  }
}

/* Secure-payment hand-off: a short, reassuring final transition. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateMain {
  overflow: hidden;
  border-radius: 28px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateMain > .pjCbHeading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 76px;
  margin: 0;
  padding: 16px clamp(24px, 5vw, 48px);
  border: 0;
  border-bottom: 1px solid rgba(23, 22, 21, 0.08);
  border-radius: 0;
  background: rgba(247, 245, 241, 0.62);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateMain > .pjCbBody {
  display: grid;
  place-items: center;
  min-height: 370px;
  padding: clamp(38px, 6vw, 68px) 24px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 245, 241, 0.72));
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateCard {
  box-sizing: border-box;
  width: min(100%, 560px);
  padding: clamp(32px, 5vw, 48px);
  border: 1px solid rgba(152, 101, 64, 0.18);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 54px rgba(23, 22, 21, 0.09);
  text-align: center;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateIcon,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbInlineStateIcon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #b8794d, #986540);
  font-weight: 750;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateIcon {
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  box-shadow: 0 12px 26px rgba(152, 101, 64, 0.22);
  font-size: 1.4rem;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateCard--error .pjCbStateIcon {
  background: linear-gradient(135deg, #c55e54, #9e3e37);
  box-shadow: 0 12px 26px rgba(158, 62, 55, 0.2);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateCard--success .pjCbStateIcon {
  background: linear-gradient(135deg, #35a06f, #1e5d45);
  box-shadow: 0 12px 26px rgba(30, 93, 69, 0.22);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateCard h2 {
  margin: 0 0 12px;
  color: var(--korso-ink);
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateCard p {
  max-width: 420px;
  margin: 0 auto 26px;
  color: #766e67;
  font-size: 1rem;
  line-height: 1.55;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 150px;
  min-height: 48px;
  margin: 0;
  padding: 0 22px !important;
  border-radius: 999px !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbStateAction::after {
  display: none !important;
  content: none !important;
}

/* Upgrade fallback fragments that were mounted before the semantic state partial loaded. */
#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) {
  overflow: hidden;
  border-radius: 28px !important;
  background: #fff !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .panel-heading {
  min-height: 76px;
  margin: 0;
  padding: 16px clamp(24px, 5vw, 48px);
  border: 0;
  border-bottom: 1px solid rgba(23, 22, 21, 0.08);
  border-radius: 0px !important;
  background: rgba(247, 245, 241, 0.62) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbBody {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 38px 24px 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 245, 241, 0.5)) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbBody > .text-warning,
#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbBody > .pjCbMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 560px);
  margin: 0 !important;
  padding: 24px 28px !important;
  border: 1px solid rgba(152, 101, 64, 0.18);
  border-radius: 20px;
  color: var(--korso-ink) !important;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 38px rgba(23, 22, 21, 0.07);
  font-size: clamp(1.05rem, 2vw, 1.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbBody > .text-warning::before,
#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbBody > .pjCbMessage::before {
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #b8794d, #986540);
  box-shadow: 0 8px 18px rgba(152, 101, 64, 0.2);
  content: "!";
  font-size: 1rem;
  font-weight: 800;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbFoot {
  padding: 0 24px 38px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(247, 245, 241, 0.5), rgba(247, 245, 241, 0.72)) !important;
  text-align: center !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbFoot .row,
#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbFoot [class*="col-"] {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) > .pjCbFoot br {
  display: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) .tbStartOverButton {
  float: none !important;
  min-width: 154px;
  min-height: 50px;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 1px solid #1f5f47 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2d7a59, #1e5d45) !important;
  box-shadow: 0 12px 28px rgba(30, 93, 69, 0.24) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-transform: none !important;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) .tbStartOverButton:hover,
#pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .pjCbMain:has(.tbStartOverButton) .tbStartOverButton:focus {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(30, 93, 69, 0.3) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbInlineState {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 620px);
  min-height: 110px;
  margin: 24px auto;
  padding: 22px 26px;
  border: 1px solid rgba(152, 101, 64, 0.16);
  border-radius: 20px;
  color: #766e67;
  background: rgba(247, 245, 241, 0.72);
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbInlineState p,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbInlineState span:last-child {
  margin: 0;
  line-height: 1.45;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbInlineStateIcon {
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbInlineState--compact {
  display: inline-flex;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .tbErrorMessage:not(:empty),
#pjForm [id^="pjWrapperTicketBooking_"] .tdSelectorNoticeMsg:not(:empty) {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 18px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(173, 59, 52, 0.16) !important;
  border-radius: 14px !important;
  color: #8f3832 !important;
  background: rgba(197, 94, 84, 0.08) !important;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPaymentTransition {
  overflow: hidden;
  border-radius: 28px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPaymentTransition > .pjCbHeading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 76px;
  margin: 0;
  padding: 16px clamp(24px, 5vw, 48px);
  border: 0;
  border-bottom: 1px solid rgba(23, 22, 21, 0.08);
  border-radius: 0;
  background: rgba(247, 245, 241, 0.62);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPaymentTransition > .pjCbBody {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: clamp(42px, 7vw, 76px) 24px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 245, 241, 0.72));
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard {
  box-sizing: border-box;
  width: min(100%, 530px);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 52px);
  border: 1px solid rgba(45, 122, 89, 0.18);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 54px rgba(23, 22, 21, 0.09);
  text-align: center;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectIcon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #35a06f, #1e5d45);
  box-shadow: 0 12px 26px rgba(30, 93, 69, 0.25);
  font-size: 1.45rem;
  font-weight: 750;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectIcon span {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pjCbPaymentSpin 850ms linear infinite;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard h2 {
  margin: 0 0 12px;
  color: var(--korso-ink);
  font-size: clamp(1.65rem, 3vw, 2rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard .pjCbMessage {
  max-width: 390px;
  margin: 0 auto;
  color: #766e67 !important;
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.55;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectProgress {
  width: min(100%, 290px);
  height: 4px;
  margin: 26px auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(30, 93, 69, 0.1);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectProgress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35a06f, #1e5d45);
  animation: pjCbPaymentProgress 1.35s ease-in-out infinite;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid #1f5f47 !important;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg, #2d7a59, #1e5d45) !important;
  box-shadow: 0 10px 24px rgba(30, 93, 69, 0.22);
  font-weight: 700;
  text-decoration: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectButton:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectButton:focus {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectSecurity {
  margin: 18px 0 0;
  color: #8b847e;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectSecurity span {
  color: #2d7a59;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard--error {
  border-color: rgba(173, 59, 52, 0.18);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard--error .pjCbRedirectIcon {
  background: linear-gradient(135deg, #c55e54, #9e3e37);
  box-shadow: 0 12px 26px rgba(158, 62, 55, 0.2);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard--success {
  border-color: rgba(45, 122, 89, 0.18);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard--success .pjCbRedirectIcon {
  background: linear-gradient(135deg, #35a06f, #1e5d45);
  box-shadow: 0 12px 26px rgba(30, 93, 69, 0.22);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbBankDetails {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(152, 101, 64, 0.14);
  border-radius: 14px;
  color: #625b55;
  background: rgba(247, 245, 241, 0.72);
  line-height: 1.55;
  text-align: left;
}

@keyframes pjCbPaymentSpin {
  to { transform: rotate(360deg); }
}

@keyframes pjCbPaymentProgress {
  0% { transform: translateX(-115%); }
  100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectIcon span,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectProgress span {
    animation: none;
  }
}

@media only screen and (max-width: 560px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPaymentTransition > .pjCbBody {
    min-height: 360px;
    padding: 28px 16px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbRedirectCard {
    padding: 30px 22px;
    border-radius: 22px;
  }
}

/* The bundled jQuery UI calendar, visually integrated with the booking flow. */
#ui-datepicker-div.pjCbjQueryUI.ui-datepicker {
  box-sizing: border-box;
  width: 328px;
  max-width: calc(100vw - 24px);
  padding: 12px;
  border: 1px solid rgba(68, 57, 49, 0.14);
  border-radius: 18px;
  color: #393531;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(42, 34, 28, 0.18), 0 3px 10px rgba(42, 34, 28, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  z-index: 10000 !important;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-header {
  min-height: 44px;
  padding: 0 46px;
  border: 0;
  border-radius: 12px;
  color: #2d2926;
  background: #f4f1ed;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-title {
  margin: 0;
  color: #2d2926;
  font-size: 0.98rem;
  font-weight: 720;
  line-height: 44px;
  letter-spacing: -0.015em;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next {
  top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  color: #8a5837;
  background: transparent;
  cursor: pointer;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev-hover {
  top: 5px;
  left: 5px;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next-hover {
  top: 5px;
  right: 5px;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev:hover,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev:focus-visible,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next:hover,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next:focus-visible {
  color: #fff;
  background: #986540;
  outline: none;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev span,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next span {
  display: none;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev::before,
#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next::before {
  width: 8px;
  height: 8px;
  border: solid currentColor;
  content: "";
  transform: rotate(45deg);
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-prev::before {
  border-width: 0 0 2px 2px;
}

#ui-datepicker-div.pjCbjQueryUI .ui-datepicker-next::before {
  border-width: 2px 2px 0 0;
}

#ui-datepicker-div.pjCbjQueryUI table {
  width: 100%;
  margin: 8px 0 0;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
  font-size: inherit;
}

#ui-datepicker-div.pjCbjQueryUI th {
  padding: 7px 2px 5px;
  border: 0;
  color: #776f69;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

#ui-datepicker-div.pjCbjQueryUI td {
  padding: 0;
  border: 0;
}

#ui-datepicker-div.pjCbjQueryUI td a,
#ui-datepicker-div.pjCbjQueryUI td span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 34px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #403b37;
  background: #f7f5f2;
  background-image: none;
  font-weight: 590;
  line-height: 1;
  text-align: center;
}

#ui-datepicker-div.pjCbjQueryUI td a:hover,
#ui-datepicker-div.pjCbjQueryUI td a:focus-visible {
  border-color: rgba(152, 101, 64, 0.28);
  color: #71482e;
  background: #f1e8e1;
  outline: none;
}

#ui-datepicker-div.pjCbjQueryUI td .ui-state-active {
  border-color: #986540;
  color: #fff;
  background: #986540;
  box-shadow: 0 5px 12px rgba(125, 80, 50, 0.2);
  font-weight: 750;
}

#ui-datepicker-div.pjCbjQueryUI td .ui-state-highlight:not(.ui-state-active) {
  border-color: rgba(152, 101, 64, 0.48);
  color: #71482e;
  background: #fff;
  font-weight: 700;
}

#ui-datepicker-div.pjCbjQueryUI td.ui-state-disabled {
  opacity: 1;
}

#ui-datepicker-div.pjCbjQueryUI td.ui-state-disabled span {
  color: #b4ada7;
  background: #faf9f8;
}

#ui-datepicker-div.pjCbjQueryUI td.pjCbClosedDay span {
  color: #918983 !important;
  background: repeating-linear-gradient(135deg, rgba(68, 57, 49, 0.1) 0 3px, rgba(68, 57, 49, 0.018) 3px 12px), #f3f1ef !important;
}

@media only screen and (max-width: 380px) {
  #ui-datepicker-div.pjCbjQueryUI.ui-datepicker {
    padding: 9px;
  }

  #ui-datepicker-div.pjCbjQueryUI table {
    border-spacing: 2px;
  }

  #ui-datepicker-div.pjCbjQueryUI td a,
  #ui-datepicker-div.pjCbjQueryUI td span {
    min-width: 32px;
    height: 34px;
  }
}

/* Desktop schedule: turn the legacy seven-day navigation into a calm,
   tactile segmented date control and use the wider canvas more fully. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel {
  order: 1;
  display: inline-flex;
  float: none !important;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  margin: 0 !important;
  padding: 5px;
  border: 1px solid rgba(152, 101, 64, 0.18);
  border-radius: 18px;
  background: rgba(247, 245, 241, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 7px 20px rgba(45, 34, 26, 0.055);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 40px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 13px;
  color: #675f59;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav:focus-visible {
  color: #684029;
  background: rgba(152, 101, 64, 0.1);
  text-decoration: none;
  outline: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav.active {
  color: #fff;
  background: var(--korso-bronze);
  box-shadow: 0 6px 14px rgba(125, 80, 50, 0.2);
  font-weight: 720;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbNavArrowLeft,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbNavArrowRight {
  min-width: 40px;
  width: 40px;
  padding: 0 !important;
  color: var(--korso-bronze);
  font-size: 1rem;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .form-group > .pull-right {
  order: 2;
}

@media only screen and (min-width: 1100px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventList {
    padding: 32px 38px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow {
    grid-template-columns: 152px minmax(0, 1fr);
    gap: 28px;
    margin-bottom: 38px;
    padding-bottom: 38px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent {
    padding-top: 2px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent .pjCbMovieDuration {
    margin-bottom: 10px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent .pjCbMovieDesc {
    max-width: 100%;
    margin-bottom: 14px;
    line-height: 1.5;
  }
}

/* On narrow screens the summary and Tickets cards are stacked. Keep both
   columns flush to the same edge and remove any desktop-style offset from
   the Tickets card. */
@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview {
    align-items: stretch !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview > [class*="col-"] {
    align-self: flex-start !important;
    width: 100% !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview > .pjCbTicketSummary {
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard {
    padding-left: 27px !important;
    padding-right: 34px !important;
  }
}

/* Editorial introduction: give prose more measure and an even reading edge. */
@media only screen and (min-width: 961px) {
  .info-block-page--inner .text-rows__columns--vertical-align > .text-rows__column--image {
    max-width: 44%;
    flex-basis: 44%;
  }

  .info-block-page--inner .text-rows__columns--vertical-align > .text-rows__column--text {
    max-width: 56%;
    flex-basis: 56%;
  }

  .info-block-page--inner .text-rows__columns--left .column-content {
    max-width: none;
    padding-right: clamp(24px, 3.5vw, 54px);
    padding-left: clamp(20px, 2.5vw, 38px);
  }

  .info-block-page--inner .text-rows__column--text .description {
    max-width: 68ch;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }
}

/* Header contact link: keep the underline close to the label and retain the
   action at compact breakpoints (the legacy sheet hides this list item). */
.header__how-to-find a.underline-right {
  padding-bottom: 2px;
  overflow: visible;
}

@media only screen and (max-width: 960px) {
  .header__columns--main-menu > .header__column:last-child,
  .header__columns--main-menu > .header__column:last-child .header__column-grid,
  .header__columns--main-menu > .header__column:last-child .header__column-grid--right > li:first-child {
    display: flex;
    align-items: center;
  }

  .header__columns--main-menu > .header__column:last-child {
    height: 100%;
    justify-content: flex-end;
  }

  .header__columns--main-menu > .header__column:last-child .header__column-grid,
  .header__columns--main-menu > .header__column:last-child .header__column-grid--right > li:first-child {
    height: 100%;
  }

  .header__how-to-find,
  .header__how-to-find a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .header__how-to-find::before {
    top: auto;
    margin-top: 0;
    flex: 0 0 auto;
  }
}

@media only screen and (max-width: 480px) {
  .header__how-to-find a {
    font-size: 0.75rem;
    letter-spacing: 0.01em;
  }

  .header__how-to-find::before {
    margin-right: 6px;
  }
}

/* Use the same animated underline as the footer's other text links without
   shrinking the legal button's accessible 44px hit target. */
body .footer__legal .footer-terms-btn {
  text-decoration: none;
}

body .footer__legal .footer-terms-btn .underline-right {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding-bottom: 2px;
  overflow: visible;
}

body .footer__legal .footer-terms-btn:hover .underline-right::after,
body .footer__legal .footer-terms-btn:focus-visible .underline-right::after {
  width: 100%;
  background-color: currentColor;
}

/* Quiet separators make the flat date strip easier to scan. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav {
  position: relative;
  min-width: 72px;
  font-family: "Exo 2", sans-serif;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav + .pjCbDaysNav::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -1px;
  width: 1px;
  background: rgba(68, 57, 49, 0.11);
  content: "";
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav.active::before,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav.active + .pjCbDaysNav::before {
  display: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDayName {
  font-weight: 500;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDayDate {
  color: #393531;
  font-weight: 650;
}

/* A deliberate, helpful state when the programme is not published yet. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbScheduleEmptyBody {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 32px !important;
  background: rgba(255, 255, 255, 0.68);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbScheduleEmpty {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100%, 620px);
  padding: 26px 30px;
  border: 1px solid rgba(152, 101, 64, 0.16);
  border-radius: 20px;
  background: #fff;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbScheduleEmptyIcon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #986540;
  background: rgba(152, 101, 64, 0.1);
  font-size: 1rem;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbScheduleEmpty h2 {
  margin: 0 0 5px;
  color: #171615;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbScheduleEmpty p {
  margin: 0;
  color: #766e67;
  font-size: 0.9rem;
  line-height: 1.5;
}

@media only screen and (max-width: 520px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbScheduleEmptyBody {
    min-height: 170px;
    padding: 22px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbScheduleEmpty {
    align-items: flex-start;
    padding: 22px;
  }
}

@media only screen and (max-width: 1099px) and (min-width: 521px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc:not(.is-expanded) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc .pjCbMovieMore[hidden] {
  display: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc .pjCbMovieMore[hidden]::after {
  content: none !important;
}

/* Modern, brand-aligned date field and calendar trigger. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .input-group.date {
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(92, 78, 68, 0.2);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(54, 43, 35, 0.07);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .input-group.date:focus-within {
  border-color: rgba(152, 101, 64, 0.58);
  box-shadow: 0 0 0 3px rgba(152, 101, 64, 0.12), 0 8px 20px rgba(54, 43, 35, 0.08);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .tbSelectorDatepick {
  height: 46px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .tbSelectorDatepickIcon {
  position: relative;
  display: inline-flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(92, 78, 68, 0.14);
  border-radius: 0;
  color: #8a5837;
  background: rgba(152, 101, 64, 0.055);
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .tbSelectorDatepickIcon:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .tbSelectorDatepickIcon:focus-visible {
  color: #684029;
  background: rgba(152, 101, 64, 0.13);
  outline: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .tbSelectorDatepickIcon i {
  display: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbWeekPanelDatePicker .tbSelectorDatepickIcon::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background: center / contain no-repeat 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='%238a5837' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01' stroke-width='2.4'/%3E%3C/svg%3E");
}

/*
 * Events synopsis model: the full localized copy lives in a measured text
 * region, while the disclosure control remains outside the clamp. This keeps
 * the control visible, preserves paragraph structure when opened, and behaves
 * consistently at every viewport width.
 */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieDesc {
  --korso-synopsis-lines: 4;
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSynopsisText {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--korso-synopsis-lines);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSynopsisText.is-collapsed {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--korso-synopsis-lines);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSynopsisParagraph {
  display: inline;
  margin: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSynopsisParagraph + .pjCbSynopsisParagraph::before {
  content: " ";
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc.is-expanded .pjCbSynopsisText,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSynopsisText.is-expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc.is-expanded .pjCbSynopsisParagraph {
  display: block;
  margin: 0 0 0.72em;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc.is-expanded .pjCbSynopsisParagraph:last-child {
  margin-bottom: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc.is-expanded .pjCbSynopsisParagraph + .pjCbSynopsisParagraph::before {
  content: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDesc .pjCbMovieMore {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieStaticTitle {
  color: inherit;
  cursor: default;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieIntroImage > img {
  display: block;
  width: 100%;
}

@media only screen and (min-width: 961px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieDesc {
    --korso-synopsis-lines: 3;
  }
}

@media only screen and (max-width: 520px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieDesc {
    --korso-synopsis-lines: 4;
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.48;
  }
}

@media only screen and (max-width: 560px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard {
    grid-template-columns: 1fr !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard > .row:first-of-type {
    min-height: 48px;
    padding: 8px 0 !important;
    border-top: 1px solid rgba(23, 22, 21, 0.075) !important;
    border-left: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard {
    padding-left: 24px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard .pjCbSeatsTitle {
    font-size: 1.65rem;
  }
}

/* Final seat-screen spacing and control alignment. */
.korso-booking-active .info-block-page--inner {
  padding-top: clamp(22px, 3vw, 34px);
}

.korso-booking-active #pjForm {
  border-radius: 38px;
}

.korso-booking-active #pjForm [id^="pjWrapperTicketBooking_"] [id^="tbContainer_"] > .container-fluid > .panel.panel-default {
  overflow: hidden;
  border-radius: 30px;
}

.korso-seat-booking-active .info-block-page--inner {
  padding-top: clamp(22px, 3vw, 34px);
}

.korso-preview-booking-active .info-block-page--inner {
  padding-top: clamp(22px, 3vw, 34px);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain {
  overflow: hidden;
  border-radius: 28px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  margin: 0;
  padding: 20px clamp(32px, 6vw, 58px);
  border: 0;
  border-bottom: 1px solid rgba(23, 22, 21, 0.1);
  border-radius: 0;
  background: rgba(247, 245, 241, 0.62);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbHeading::before,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbHeading::after {
  display: none;
  content: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbHeading .pjCbBtnBack {
  order: 1;
  float: none !important;
}

/* Checkout keeps cancellation in the header and the reversible back step in
   the action bar, alongside the forward step. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain > .pjCbHeading .pjCbCheckoutHeaderCancel {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(23, 22, 21, 0.1);
  border-radius: 999px;
  color: #625b55;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain > .pjCbHeading .pjCbCheckoutHeaderCancel:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain > .pjCbHeading .pjCbCheckoutHeaderCancel:focus {
  border-color: rgba(152, 101, 64, 0.28);
  color: var(--korso-ink);
  background: #fff;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain:not(.pjCbCheckoutMain) > .pjCbHeading .pjCbSeatsHeaderCancel {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(23, 22, 21, 0.1);
  border-radius: 999px;
  color: #625b55;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain:not(.pjCbCheckoutMain) > .pjCbHeading .pjCbSeatsHeaderCancel:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain:not(.pjCbCheckoutMain) > .pjCbHeading .pjCbSeatsHeaderCancel:focus {
  border-color: rgba(152, 101, 64, 0.28);
  color: var(--korso-ink);
  background: #fff;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDetails > .pjCbHeading .pjCbBtnBack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(23, 22, 21, 0.1);
  border-radius: 999px;
  color: #625b55;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDetails > .pjCbHeading .pjCbBtnBack span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  line-height: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDetails > .pjCbHeading .pjCbBtnBack:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbMovieDetails > .pjCbHeading .pjCbBtnBack:focus-visible {
  border-color: rgba(152, 101, 64, 0.28);
  color: var(--korso-ink);
  background: #fff;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbHeading > .pull-right {
  order: 2;
  float: none !important;
  margin: 0 0 0 auto !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading > .pull-right {
  margin-left: auto !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtn,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtnLabel,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtnPrimary::after {
  line-height: 1 !important;
}

@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview {
    grid-template-columns: minmax(0, 1.45fr) minmax(255px, 0.65fr) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 104px minmax(0, 1fr) minmax(0, 0.8fr) !important;
    column-gap: 24px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    width: 104px;
    height: 156px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    height: auto;
    min-height: 82px;
    align-items: flex-start;
    padding-top: 2px;
    font-size: clamp(1.55rem, 2.15vw, 1.9rem);
  }
}

/* Checkout: summary, totals, seller and buyer details. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview {
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr) !important;
  gap: 18px !important;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > .pjCbScreeningSummary {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > .pjCbTicketSummary {
  grid-column: 2;
  grid-row: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 2;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain {
  overflow: hidden;
  border-radius: 28px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview .well {
  height: 100%;
  min-height: 0;
  padding: 28px 30px !important;
  overflow: hidden;
  border: 1px solid rgba(152, 101, 64, 0.16) !important;
  border-radius: 22px !important;
  background: rgba(247, 245, 241, 0.72) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr;
  align-content: start;
  column-gap: 24px !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 104px;
  height: 156px;
  align-self: start;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-height: 68px;
  height: auto;
  margin: 0 0 10px;
  padding: 0 0 13px;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) {
  grid-column: 2;
  grid-row: 2;
  display: grid !important;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
  align-content: start;
  width: 100% !important;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 0 !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid rgba(23, 22, 21, 0.075);
  font-size: 0.875rem;
  line-height: 1.25;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:nth-last-child(-n + 2) {
  border-bottom: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:nth-child(odd) {
  grid-column: 1;
  padding-right: 12px !important;
  color: #766e67;
  font-weight: 650;
  text-transform: capitalize;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:nth-child(even) {
  grid-column: 2;
  justify-content: flex-end;
  color: var(--korso-ink);
  font-size: 0.975rem;
  text-align: right !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard {
  display: block !important;
  padding-left: 30px !important;
  border-left: 1px solid rgba(152, 101, 64, 0.16) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .pjCbSeatsTitle,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) .pjCbSeatsTitle {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 0 10px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(23, 22, 21, 0.075);
  color: var(--korso-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0;
  border-bottom: 1px solid rgba(23, 22, 21, 0.065);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row::before,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row::after {
  display: none;
  content: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row > .pjCbSeatsInfo {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: #766e67;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row > [class*="col-"] + [class*="col-"] {
  margin-top: 0 !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row > .pjCbSeatsInfo:first-child {
  grid-column: 1;
  text-transform: capitalize;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row > .pjCbSeatsInfo:last-child {
  grid-column: 2;
  padding-left: 16px;
  color: var(--korso-ink);
  font-size: 0.95rem;
  text-align: right;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row:last-child {
  align-items: center;
  min-height: 52px;
  margin-top: 10px !important;
  padding: 7px 14px;
  border: 1px solid rgba(152, 101, 64, 0.18);
  border-radius: 14px;
  background: rgba(152, 101, 64, 0.075);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row:last-child > .pjCbSeatsInfo {
  display: flex;
  align-items: center;
  margin: 0 !important;
  color: var(--korso-ink);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard > .row:last-child > .pjCbSeatsInfo:last-child {
  color: var(--korso-bronze);
  font-size: 1.2rem;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) .well {
  display: grid;
  grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 30px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) .pjCbSeatsTitle {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) .row {
  grid-column: 2;
  margin: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) .pjCbSeatsInfo {
  margin: 0;
  padding: 3px 0;
  color: #766e67;
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle {
  margin: 8px 0 0;
  padding: 28px 30px 0;
  border: 1px solid rgba(152, 101, 64, 0.16);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  color: var(--korso-ink);
  background: rgba(247, 245, 241, 0.72);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-align: left;
}

/* The form heading is a card header: match the seller card's title and
   divider, while the surrounding border remains continuous with the fields. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle::after {
  display: block;
  height: 1px;
  margin-top: 14px;
  content: "";
  background: rgba(23, 22, 21, 0.075);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .row,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .form-group,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .checkbox {
  margin: 0 !important;
  padding-right: 30px;
  padding-left: 30px;
  border-right: 1px solid rgba(152, 101, 64, 0.16);
  border-left: 1px solid rgba(152, 101, 64, 0.16);
  background: rgba(247, 245, 241, 0.72);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle + .row {
  /* Keep the first field from crowding the title's inset divider. */
  padding-top: 18px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .form-group.required {
  padding-top: 4px;
  padding-right: 45px;
  padding-left: 45px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .checkbox {
  margin-bottom: 0 !important;
  padding-top: 32px !important;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(152, 101, 64, 0.16);
  border-radius: 0 0 22px 22px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .form-group > .control-label {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding-left: 0;
  color: #5f5852;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .form-control {
  height: 50px;
  border: 1px solid rgba(23, 22, 21, 0.13);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  font-family: inherit;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .form-control:focus {
  border-color: var(--korso-bronze);
  box-shadow: 0 0 0 3px rgba(152, 101, 64, 0.12);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut input[name="captcha"] + * img,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut input[name="captcha"] ~ img {
  border-radius: 8px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsActions .col-md-12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsActions br {
  display: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsActions .pjCbBtnPrimary {
  order: 2;
  float: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsActions .pjCbBtnSecondary {
  order: 1;
  float: none !important;
}

/* Final order review: reuse the checkout's card hierarchy and restrained rhythm. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain {
  overflow: hidden;
  border-radius: 28px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading .pjCbBtnBack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(23, 22, 21, 0.1);
  border-radius: 999px;
  color: #625b55;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading .pjCbBtnBack:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading .pjCbBtnBack:focus {
  border-color: rgba(152, 101, 64, 0.28);
  color: var(--korso-ink);
  background: #fff;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading .pjCbPreviewHeaderCancel {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(23, 22, 21, 0.1);
  border-radius: 999px;
  color: #625b55;
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading .pjCbPreviewHeaderCancel:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading .pjCbPreviewHeaderCancel:focus {
  border-color: rgba(152, 101, 64, 0.28);
  color: var(--korso-ink);
  background: #fff;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPayment {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
  gap: 18px;
  padding: 28px 20px 34px !important;
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard {
  min-width: 0;
  padding: 28px 30px;
  border: 1px solid rgba(152, 101, 64, 0.16);
  border-radius: 22px;
  background: rgba(247, 245, 241, 0.72);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSummary {
  grid-column: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPayment {
  grid-column: 2;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer {
  grid-column: 1 / -1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSummary--with-poster {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: auto repeat(4, auto);
  column-gap: 24px;
  align-content: start;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPoster {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 104px;
  height: 156px;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(35, 28, 23, 0.14);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPoster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSummary--with-poster > :not(.pjCbPreviewPoster) {
  grid-column: 2;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard .pjCbPaymentTitle {
  min-height: 0;
  margin: 0 0 10px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(23, 22, 21, 0.075);
  color: var(--korso-ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSummary .pjCbPaymentTitle {
  font-size: clamp(1.45rem, 2.25vw, 1.9rem);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .form-horizontal {
  margin: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .form-horizontal > .form-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 42px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid rgba(23, 22, 21, 0.075);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .form-horizontal > .form-group::before,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .form-horizontal > .form-group::after {
  display: none;
  content: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .form-horizontal:last-child > .form-group {
  border-bottom: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .form-horizontal > .form-group > label {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: #766e67;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: left !important;
  text-transform: capitalize;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .form-horizontal > .form-group > label:last-child {
  padding-left: 16px;
  color: var(--korso-ink);
  font-size: 0.975rem;
  text-align: right !important;
  text-transform: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPayment > .form-horizontal:last-child {
  margin-top: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(152, 101, 64, 0.18);
  border-radius: 14px;
  background: rgba(152, 101, 64, 0.075);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPayment > .form-horizontal:last-child > .form-group {
  min-height: 38px;
  padding: 0;
  border: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPayment > .form-horizontal:last-child label {
  color: var(--korso-ink);
  font-weight: 700;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPayment > .form-horizontal:last-child label:last-child {
  color: var(--korso-bronze);
  font-size: 1.2rem;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer {
  display: grid;
  grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1fr);
  column-gap: 30px;
  align-items: start;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller .pjCbPaymentTitle,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer .pjCbPaymentTitle {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
  padding: 0;
  border: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller > div,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > div {
  grid-column: 2;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller .form-group,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer .form-group {
  margin: 0;
  padding: 3px 0;
  color: #766e67;
  line-height: 1.4;
  text-align: left;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > .row::before,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > .row::after {
  display: none;
  content: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > .row > [class*="col-"] {
  float: none;
  width: auto;
  padding: 0;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer .control-label {
  display: block;
  margin-bottom: 6px;
  color: #766e67;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.25;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer .text-muted {
  display: block;
  color: var(--korso-ink);
  font-size: 1rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > .row > [class*="col-"] + [class*="col-"] {
  padding-left: 28px;
  border-left: 1px solid rgba(23, 22, 21, 0.09);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer br,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard > .divider,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPayment > .tbCcWrap,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPayment > .row:has(.tbBankWrap) {
  display: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary {
  min-width: 156px;
  min-height: 52px;
  padding: 0 24px !important;
  border-color: #1f5f47 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #2d7a59 0%, #1e5d45 100%) !important;
  box-shadow: 0 12px 28px rgba(30, 93, 69, 0.28), 0 3px 8px rgba(23, 22, 21, 0.12) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary:focus {
  border-color: #246d51 !important;
  color: #fff !important;
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(30, 93, 69, 0.34), 0 4px 10px rgba(23, 22, 21, 0.14) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary:focus-visible {
  outline: 3px solid rgba(45, 122, 89, 0.25);
  outline-offset: 3px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary:active {
  transform: translateY(0);
  box-shadow: 0 7px 18px rgba(30, 93, 69, 0.26) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary .pjCbBtnArrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 160ms ease, background 160ms ease;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary:hover .pjCbBtnArrow,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary:focus .pjCbBtnArrow {
  background: rgba(255, 255, 255, 0.24);
  transform: translateX(2px);
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .col-md-12 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions br {
  display: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary {
  order: 2;
  float: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnSecondary {
  order: 1;
  float: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtn,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnLabel {
  text-transform: none !important;
}

@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPayment {
    grid-template-columns: 1fr;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSummary,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPayment,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer {
    grid-column: 1;
  }
}

@media only screen and (max-width: 560px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPayment {
    padding: 22px 14px 28px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewCard {
    padding: 22px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSummary--with-poster,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer {
    grid-template-columns: 1fr;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewPoster,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSummary--with-poster > :not(.pjCbPreviewPoster),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller .pjCbPaymentTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller > div,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer .pjCbPaymentTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > div {
    grid-column: 1;
    grid-row: auto;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewSeller .pjCbPaymentTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer .pjCbPaymentTitle {
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > .row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewActions .pjCbBtnPrimary {
    min-width: 0;
  }
}

@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview {
    grid-template-columns: 1fr !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > .pjCbScreeningSummary,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > .pjCbTicketSummary,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard {
    padding-left: 30px !important;
    border-top: 1px solid rgba(152, 101, 64, 0.16) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) .well {
    display: block;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview > [class*="col-"]:nth-child(3) .pjCbSeatsTitle {
    margin-bottom: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075);
  }
}

@media only screen and (max-width: 560px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsOverview .well,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbTicketCard {
    padding: 22px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 1fr !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) {
    grid-column: 1;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-row: 1;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) {
    grid-row: 2;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle {
    padding: 22px 22px 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .row,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .form-group,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .checkbox {
    padding-right: 22px;
    padding-left: 22px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .row .form-group {
    text-align: left;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .pjCbFormTitle ~ .row .form-group > .control-label {
    display: inline-block;
    width: auto;
    /* Keep a small optical inset between the outer edge and placeholder text. */
    padding-left: 6px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .form-group.required > .control-label {
    /* Security code sits outside the two-column row but shares its grid. */
    padding-left: 6px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormCheckOut > .pjCbBody > .form-group.required {
    padding-right: 37px;
    padding-left: 22px;
  }
}

/* Final schedule refinements: compact, flat dates and readable synopses. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel {
  gap: 2px;
  padding: 4px;
  border-color: rgba(68, 57, 49, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav {
  flex-direction: row;
  gap: 6px;
  min-width: 68px;
  min-height: 40px;
  padding: 7px 9px !important;
  border-radius: 10px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDayName {
  color: #817870;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDayDate {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav.active {
  border: 0 !important;
  background: #986540;
  box-shadow: none;
  transform: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav.active .pjCbDayName,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav.active .pjCbDayDate {
  color: #fff;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav--closed {
  position: relative;
  overflow: hidden;
  color: #8a827c;
  border: 1px solid rgba(68, 57, 49, 0.06) !important;
  background: repeating-linear-gradient(135deg, rgba(68, 57, 49, 0.1) 0 3px, rgba(68, 57, 49, 0.018) 3px 12px), #f3f1ef;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbFormDate .pjCbWeekPanel .pjCbDaysNav--closed .pjCbDayDate {
  color: #8a827c;
  text-decoration: none;
}

#pjForm .pjCbjQueryUI td.pjCbClosedDay span {
  color: #918983 !important;
  background: repeating-linear-gradient(135deg, rgba(68, 57, 49, 0.11) 0 3px, rgba(68, 57, 49, 0.02) 3px 12px), #f2f0ee !important;
  text-decoration: none;
}

/* Elapsed screenings stay legible but cannot be mistaken for active actions. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent .pjCbMovieTime a.tbSelectorSeats.pjCbTimePassed,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent .pjCbMovieTime a.tbSelectorSeats.pjCbTimePassed:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent .pjCbMovieTime a.tbSelectorSeats.pjCbTimePassed:focus {
  transform: none;
  border-color: #d8d2cc !important;
  color: #746d67 !important;
  background: #efedea !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTimePassed .pjCbShowtimeTier {
  border-left-color: rgba(74, 66, 60, 0.18) !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbShowtimeStatus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 2px;
  color: #827a73;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbShowtimeStatus::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #aaa29b;
  content: "";
}

/* Checkout legal consent: one clear, fully clickable control. */
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox.form-group.pjCbTermsConsent {
  margin: 0;
  padding-left: 0;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox > label,
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsConsent > .pjCbTermsConsentLabel {
  min-height: 34px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox > label {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: max-content !important;
  max-width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #555;
  font-size: 14px;
  letter-spacing: 0;
  text-decoration-color: currentColor;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsConsent > .pjCbTermsConsentLabel {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: max-content !important;
  max-width: 100%;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsConsent > .pjCbTermsConsentLabel:hover,
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox > label:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media only screen and (min-width: 961px) {
  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsConsent > .pjCbTermsConsentLabel,
  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox > label {
    width: fit-content;
    max-width: 100%;
    padding-right: 22px;
  }
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[type="checkbox"][name="terms"] {
  position: static;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[type="checkbox"][name="terms"]:checked {
  border-color: #986540;
  background-color: #986540;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3.1 3.2L14 5.7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[type="checkbox"][name="terms"]:checked::after {
  content: none;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[type="checkbox"][name="terms"]:focus-visible {
  outline: 2px solid rgba(152, 101, 64, 0.24);
  outline-offset: 2px;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsLink,
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[name="terms"] + .pjCbModalTrigger {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 20px;
  margin: 0;
  padding: 0;
  width: fit-content;
  color: #8d857c;
  font-family: "Exo 2", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  transform: translateY(-2px);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsLink:hover,
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsLink:focus,
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[name="terms"] + .pjCbModalTrigger:hover,
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[name="terms"] + .pjCbModalTrigger:focus {
  color: #5f5950;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsLink:focus-visible,
[id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[name="terms"] + .pjCbModalTrigger:focus-visible {
  outline: 2px solid rgba(152, 101, 64, 0.22);
  outline-offset: 2px;
}

@media only screen and (max-width: 560px) {
  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut > .pjCbBody > .checkbox {
    padding: 0 !important;
  }

  /* Follow the same left edge as the buyer inputs, rather than the card edge. */
  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox.form-group.pjCbTermsConsent {
    padding-left: 22px !important;
  }

  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox > label,
  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsConsent > .pjCbTermsConsentLabel {
    min-height: 44px;
  }

  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .checkbox input[type="checkbox"][name="terms"] {
    width: 24px;
    height: 24px;
  }

  [id^="pjWrapperTicketBooking_"] form.pjCbFormCheckOut .pjCbTermsConsent > .pjCbTermsConsentLabel {
    gap: 8px;
  }
}

/* Match the checkout terms dialog to the homepage legal presentation. */
#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal.pjCbTermsModal {
  padding: 16px;
  color: #181512;
  font-family: "Exo 2", "Helvetica Neue", Arial, sans-serif;
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-dialog {
  width: min(920px, calc(100vw - 32px));
  margin: 5vh auto;
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid rgba(152, 101, 64, 0.22);
  border-radius: 24px;
  background: #fffdf9;
  box-shadow: 0 24px 70px rgba(48, 35, 26, 0.28);
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-header {
  position: relative;
  padding: 24px 64px 18px;
  border-bottom: 1px solid rgba(152, 101, 64, 0.16);
  text-align: center;
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-title {
  color: #181512;
  font-family: "Exo 2", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  font-weight: 750;
  line-height: 1.2;
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-header .close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  color: #7d5032;
  font-size: 2rem;
  line-height: 1;
  opacity: 1;
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-body {
  min-height: 0;
  padding: clamp(22px, 4vw, 40px);
  overflow-y: auto;
  font-size: clamp(0.94rem, 1.2vw, 1.06rem);
  line-height: 1.65;
  hyphens: auto;
  overflow-wrap: anywhere;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-footer {
  display: flex;
  justify-content: center;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(152, 101, 64, 0.16);
  background: #fffdf9;
  text-align: center;
}

#pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-footer .pjCbBtnPrimary {
  float: none !important;
  width: min(240px, 100%);
  min-height: 52px;
  margin: 0;
  border-radius: 999px;
}

@media only screen and (max-width: 560px) {
  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal.pjCbTermsModal {
    padding: 10px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-dialog {
    width: calc(100vw - 20px);
    margin: 2vh auto;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-content {
    max-height: 96vh;
    border-radius: 18px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-header {
    padding: 20px 56px 16px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-body {
    padding: 20px 18px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}

@media only screen and (min-width: 1100px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent .pjCbMovieDesc {
    width: 100%;
    max-width: none;
    font-size: 1.02rem;
    line-height: 1.55;
  }
}

/* The close control shares the navigation list's left alignment line on
   compact screens (<=960px), where the full-height drawer still exists and
   its header row is visible. On desktop the drawer's close pill row is
   display:none (floating-bubble block below), so this offset only ever
   applies on compact screens and needs no desktop counter-rule. */
.sidebar .header__menu--close {
  margin-left: -16px;
}

/* Active menu entries are already indicated by their bronze color; the
   extra 600 weight from theme.css made the current-locale active rows
   (e.g. "Veikali"/"Vakances" on the lv home page) visibly heavier than
   their siblings. Keep the color, drop the weight — inherit resolves to
   the same weight the sibling links compute, so the menu reads evenly.
   This selector is shared by every locale (there is no locale-scoped
   class to gate on), so lv/en/ru all stay consistent. */
.sidebar__nav-menu li .active {
  font-weight: inherit;
}

/* On desktop the menu opens as a floating bubble anchored below the header
   bar, aligned with it: the bubble's left edge matches the bar's left edge —
   24px page padding, plus the bar's own centering past 1528px (1528 = 1480px
   max-width + 2*24px page padding), so bubble and bar share one vertical
   line at every desktop width. There is no close control inside the bubble:
   the bar keeps its "Izvēlne" toggle visible above the bubble (top 124px =
   bar bottom 112px + 12px gap), and clicking it again closes the menu, so
   the legacy close pill row (`.sidebar .header__wrap`) is display:none here.
   The bubble is a fixed clamp() width, so the anchor always leaves room to
   the right; no upper width cap is needed. Gutters are symmetric
   (`.sidebar--container` padding), so nav items and the footer share one
   centered content line. The legacy slide-in animates `left`, so `left` is
   pinned to the anchor in BOTH states (the open-state rule must repeat it
   to beat the legacy `.header--sidebar-open .sidebar { left: 0 }` at equal
   specificity) and the bubble instead fades/drops via opacity + transform.
   Height is content-driven with an inner scroll area on short viewports.
   Compact screens (<=960px) keep the legacy drawer with its close pill:
   every rule here is scoped to this desktop media query. Assumes
   `box-sizing: border-box` (theme.css `*` reset). */
@media only screen and (min-width: 961px) {
  .sidebar {
    top: 124px;
    bottom: auto;
    width: clamp(320px, 30vw, 420px);
    max-width: clamp(320px, 30vw, 420px);
    max-height: calc(100vh - 144px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(22, 18, 15, 0.22);
    left: calc(max(0px, (100vw - 1528px) / 2) + 24px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.38s;
  }

  .header--sidebar-open .sidebar {
    left: calc(max(0px, (100vw - 1528px) / 2) + 24px);
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
  }

  /* One centered content line: symmetric side gutters on the bubble itself,
     and cancel the inner wrap's own right padding so only these count. */
  .sidebar--container {
    padding: 30px clamp(26px, 3vw, 40px) 30px;
  }

  .sidebar__wrap {
    padding-right: 0;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* No close control on desktop: the "Izvēlne" toggle in the bar (still
     visible above the bubble, which starts below it) toggles the menu, so
     the legacy close pill row is removed from the layout entirely. */
  .sidebar .header__wrap {
    display: none;
  }

  /* Center the footer block (logo, hours, copyright, contact, socials) in
     the bubble. The social icons are inline-block items and the logo is an
     inline image, so one text-align centers all of them; the working-days
     and copyright rules carry explicit `text-align: left` from the legacy
     sheet and need their own counter-rules. The footer's top border still
     spans the full bubble width. */
  .sidebar__footer {
    text-align: center;
  }

  .sidebar__working-days,
  .sidebar__copyright {
    text-align: center;
  }
}

/* Short viewports push the header bar down 15px (legacy max-height rule),
   so the bubble follows and keeps its bottom margin. */
@media only screen and (min-width: 961px) and (max-height: 860px) {
  .sidebar {
    top: 139px;
    max-height: calc(100vh - 159px);
  }
}

/* Restore the single-button contract on compact screens. The theme's pill
   restyle of .header__menu (display: inline-flex) overrides the legacy 480px
   hiding of the desktop toggle, showing the desktop "Izvēlne" trigger next to
   the mobile burger. Ship the hide from this later sheet so only one control
   remains. */
@media only screen and (max-width: 480px) {
  .header__menu--mobile-burger-hide {
    display: none;
  }

  /* Keep the top bar in normal flow when the panel opens. The legacy rule
     makes the header container position:fixed, which collapses the bar (the
     page jolts up ~70px) and swaps the rounded glass panel for a square white
     strip. Restore flow so the bar keeps its rounded corners. */
  .header--sidebar-open .header__container {
    position: static;
    z-index: auto;
    width: auto;
    background: transparent;
    top: auto;
  }

  /* The off-canvas panel lives just below the bar on compact screens. The
     top offset must apply both open and closed so the panel never snaps back
     to y=0 (in front of the bar) while it slides out during the close
     animation. */
  .sidebar {
    top: 82px;
  }

  /* Lift the bar above the open panel so the X / "Aizvērt" close stays on
     top and tappable. */
  .header--sidebar-open .header__wrap {
    position: relative;
    z-index: 10000;
  }
}

/* The burger pictogram is absolutely positioned against its 44px-tall flex
   control, so the legacy 7px offset leaves it floating ~13px above the label.
   Centre the three lines against the control instead. */
.header__menu--mobile-burger-show.mobile_burger span {
  top: calc(50% - 1.5px);
}

/* Booking card refinements. Keep synopsis copy aligned to an even reading
   edge and contain showtime labels within their centered card. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieDesc,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbSynopsisText {
  text-align: justify !important;
  text-justify: inter-word;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbSynopsisParagraph {
  text-align: justify;
  text-justify: inter-word;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTime {
  align-items: stretch;
  justify-content: center;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 20px;
  padding: 12px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTime label,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTime .pjCbMovieTimeLabel {
  width: auto;
  max-width: 100%;
  padding-left: 0;
  text-align: center;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTimesWrapper {
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTime a.tbSelectorSeats {
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  line-height: 1.2;
}

/* Keep the two desktop header actions on one optical baseline. */
@media only screen and (min-width: 961px) {
  .header__columns--main-menu > .header__column:first-child .header__column-grid,
  .header__columns--main-menu > .header__column:last-child .header__column-grid,
  .header__columns--main-menu > .header__column:first-child .header__column-grid > li,
  .header__columns--main-menu > .header__column:last-child .header__column-grid > li,
  .header__how-to-find,
  .header__how-to-find a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .header__how-to-find::before {
    top: auto;
    margin-top: 0;
  }
}

/* Seats: keep the three screening facts in one balanced row on wide screens. */
@media only screen and (min-width: 1100px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 104px repeat(3, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    grid-row: 1 / 3;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-column: 2 / -1;
    grid-row: 1;
    min-height: 0;
    margin-bottom: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) {
    grid-row: 2;
    min-height: 64px;
    margin: 0;
    padding: 10px 0 8px 22px !important;
    border-top: 1px solid rgba(23, 22, 21, 0.075) !important;
    border-left: 1px solid rgba(23, 22, 21, 0.075) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) {
    grid-column: 2;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2) {
    grid-column: 3;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) {
    grid-column: 4;
  }
}

/* Mobile booking card.
 *
 * The widget confines the whole card to a two-column grid - poster on the left, everything else
 * stacked in a narrow content column - which leaves the synopsis about 166px wide in a 400px
 * viewport: four or five words per line. Dropping the content wrapper with display: contents
 * promotes its children to grid items, so the card can be laid out as three rows instead: poster
 * beside the title and duration, then the synopsis across the full width, running under the
 * poster. The "choose a time" row keeps its buttons on mobile but loses the box around them, so
 * the showtimes read as part of the card rather than a card inside a card.
 */
@media only screen and (max-width: 767px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow {
    align-items: start;
    grid-template-columns: minmax(92px, 128px) minmax(0, 1fr);
    /* Two explicit rows, the first only as tall as the title. Without this a row-spanning poster
       splits its spare height equally between both rows, so the title sat in a 118px row and the
       duration landed ~70px below it, floating in the middle of the column. */
    grid-template-rows: min-content 1fr;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroImage {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroContent {
    display: contents;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTitle {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieDuration {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-bottom: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieDesc {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 14px;
    max-width: 100%;
  }

  /* The time row keeps its buttons - they are how you book - but loses the box around them: the
     widget's border, background and padding that made a card inside the card, plus the fit-content
     width the desktop rules apply. Label and buttons both stay centred on the card's own
     background, across the full width, under the synopsis. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTime {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100% !important;
    max-width: 100%;
    margin-top: 14px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* The label centres as a box rather than as text inside a full-width block: with a 262px block
     and text-align alone it rendered about 20px left of the button beneath it. width: fit-content
     with auto margins puts the box - and therefore the text - exactly over the button's centre. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTime .pjCbMovieTimeLabel {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 8px;
    text-align: center;
    padding-left: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTime .pjCbMovieTimesWrapper {
    justify-content: center;
    width: auto;
    max-width: 100%;
  }
}

/* Justified copy reads well once the synopsis is expanded, but not while it is clamped. With
   -webkit-line-clamp the ellipsized line is not the block's last line, so the browser has no
   reason to leave it ragged and stretches it across the measure instead - the ~40px gaps between
   the last few words that the screenshot review caught. text-align-last cannot help, for exactly
   the same reason: it applies to the last line of the block, and this line is not it. Setting the
   clamped paragraphs left fixes it, and justification comes back when the synopsis expands. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieDesc.is-collapsed .pjCbSynopsisParagraph,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbSynopsisText.is-collapsed .pjCbSynopsisParagraph {
  text-align: left;
}

/* Seat selection viewport composition.
 * Keep the screening context, ticket counts, seat map and actions in one compact surface on
 * wide screens. The old flow stacked the map after the full-width overview, which put the only
 * action buttons below the fold even when the map itself was already visible. */
@media only screen and (min-width: 821px) {
  /* Checkout shares the seat screen's inset and vertical card rhythm. The
     legacy Bootstrap row otherwise stretches the summary, payment, and seller
     sections across one oversized horizontal composition. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats {
    padding: 18px 28px 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .pjCbSeatsOverview {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  /* Bootstrap's .row clearfix helpers become real flex items after the
     checkout stack is converted from grid to flex. They must not participate
     in the card rhythm or the cards acquire unexplained offsets. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview::before,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview::after {
    display: none !important;
    content: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > .pjCbTicketSummary {
    margin-top: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbHeading {
    min-height: 72px;
    padding: 14px 32px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats {
    display: grid !important;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
    grid-template-areas:
      "overview map"
      "guide legend";
    column-gap: 20px;
    row-gap: 12px;
    align-items: start;
    padding: 18px 28px 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview {
    display: flex !important;
    grid-area: overview;
    flex-direction: column;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview > [class*="col-"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .well {
    min-height: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(152, 101, 64, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(247, 245, 241, 0.72) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-content: start;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    grid-column: 1;
    grid-row: 1 / 5;
    width: 72px;
    height: 108px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    line-height: 1.1;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) {
    grid-column: 2;
    min-height: 0;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) { grid-row: 2; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2) { grid-row: 3; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) { grid-row: 4; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo + .pjCbSeatsInfo {
    display: inline;
    width: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:first-child {
    margin-right: 5px !important;
    color: #766e67;
    font-weight: 650;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:last-child {
    color: var(--korso-ink);
    font-size: 0.82rem;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketSummary { margin-top: 12px !important; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard {
    display: block !important;
    min-height: 0;
    padding: 14px 18px !important;
    border: 1px solid rgba(152, 101, 64, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(247, 245, 241, 0.72) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .alert {
    height: auto;
    min-height: 0;
    margin: 0 0 10px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
    font-size: 0.98rem;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row > [class*="col-"] {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row > [class*="col-"] + [class*="col-"] { margin-top: 0 !important; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard p.text-muted { margin: 0 0 5px !important; font-size: 0.74rem; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats .form-group { gap: 8px; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats .control-label { font-size: 0.78rem; line-height: 40px; white-space: nowrap; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbPriceOperator {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;
    transform: translateY(0.02em);
  }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats .form-group > .col-sm-6,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbTicketSelector { width: 46px !important; min-width: 46px !important; height: 40px; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbTicketValue { width: 30px; font-size: 0.9rem; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow {
    grid-area: map;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow > .col-xs-12 { width: 100% !important; margin: 0 !important; padding: 0 !important; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px !important;
    overflow: hidden;
    border: 1px solid rgba(152, 101, 64, 0.16);
    border-radius: 20px;
    background: #292724;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder > div {
    width: min(450px, 100%) !important;
    height: 350px !important;
    margin: 0 auto !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder > div > img { max-width: 100%; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatLegendRow {
    grid-area: legend;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatLegendRow > .col-xs-12 { width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatLegendRow br,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats > br { display: none; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) {
    grid-area: guide;
    width: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 !important;
    padding: 0 28px 16px !important;
    border: 0 !important;
    background: transparent !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions > .row,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions > .row > .col-md-12 { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions > .row > .col-md-12 { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions br { display: none; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .tbErrorMessage { position: absolute; right: 50%; bottom: 100%; transform: translateX(50%); }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions .pjCbBtn { min-width: 112px; height: 46px; min-height: 46px; padding: 0 22px !important; border-radius: 999px; }
}

/* Keep the action controls available while the narrower layout remains vertically stacked. */
@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 !important;
    padding: 10px 18px 16px !important;
    border: 0 !important;
    background: transparent !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions br { display: none; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions > .row > .col-md-12 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
}

/* Seat viewport correction pass: restore the ticket row's two-column structure after the
   Bootstrap float reset, keep the legend below the map rather than below the tallest column,
   and give the screening poster enough visual weight beside the title. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats {
    grid-template-rows: 350px auto;
    grid-template-areas:
      "overview map"
      "overview legend";
    row-gap: 8px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    width: 104px;
    height: 156px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) {
    display: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row:first-child {
    display: block !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    float: none !important;
    text-align: center;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row > [class*="col-"] p.text-muted {
    width: 100%;
    text-align: center;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats .form-group {
    width: 100%;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats .form-group {
    justify-content: center;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions {
    margin-top: 10px !important;
  }
}

/* Seat selection polish: make the desktop composition deterministic after the legacy
   Bootstrap float rules have finished laying out the booking widget. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats {
    grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
    grid-template-rows: 410px 44px;
    grid-template-areas:
      "overview map"
      "overview legend";
    row-gap: 14px;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .tbSelectSeatGuide,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbSelectSeatGuide {
    display: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketSummary {
    position: relative;
    top: 18px;
    margin-top: 18px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard {
    box-sizing: border-box;
    overflow: hidden;
    transition: height 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbSeatProgress {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 12px;
    color: #5c5149;
    font-size: 0.84rem;
    line-height: 1.35;
    text-align: left;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbSeatProgressText {
    flex: 1 1 auto;
    min-width: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbSeatProgressTotal {
    flex: none;
    color: var(--korso-ink);
    white-space: nowrap;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbSelectedSeatsLabel,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbTipToRemoveSeats {
    display: none !important;
  }

  /* Selected-seat controls share the ticket grid below them, rather than
     floating independently in the card. This makes removal feel directly
     connected to the corresponding ticket category. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row:first-child > .col-xs-12 > div[style] {
    width: 100%;
    align-self: stretch;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard [id^="tbSelectedSeats_"] {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    min-height: 44px;
    column-gap: 16px;
    row-gap: 6px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbAssignedSeats,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbAssignedNoMap {
    grid-column: var(--pjCb-ticket-column, 1);
    justify-self: start;
    align-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 33px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbAskToSelectSeats {
    min-height: 44px;
    margin: 0 !important;
    color: #6b5d52;
    font-size: 0.82rem;
    line-height: 1.3;
  }

  /* The instruction and the first seat chip occupy one shared status slot.
     Without this, an empty chip container was reserved beneath the two-line
     instruction, then removed as soon as a seat was chosen. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbAskToSelectSeats[style*="display: block"] + [id^="tbSelectedSeats_"] {
    min-height: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbAssignedSeats:focus-visible,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbAssignedNoMap:focus-visible {
    outline: 3px solid var(--korso-bronze);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard {
      transition: none;
    }
  }

  /* Let content set the panel height; do not leave unused viewport space below it. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbMain {
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbMain > .pjCbBody.pjCbSeats {
    flex: 0 0 auto;
    min-height: 0 !important;
    grid-template-rows: auto 44px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbMain > .pjCbSeatsActions {
    flex: 0 0 auto;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row:first-child,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row:first-child > [class*="col-"] {
    width: 100% !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row:first-child .alert {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Use the summary card as a compact information grid: the poster anchors the left edge,
     title spans the information area, and date/time share one row instead of leaving a
     large unused block beside the poster. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 104px repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    align-content: start;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 104px;
    height: 156px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-column: 2 / -1 !important;
    grid-row: 1;
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    justify-self: stretch;
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 4px !important;
    padding-bottom: 4px !important;
    border-bottom: 0 !important;
    font-size: clamp(1.12rem, 1.55vw, 1.28rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0;
    overflow-wrap: normal;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster {
    position: relative;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster::after {
    content: "";
    position: absolute;
    top: 58px;
    left: 132px;
    right: 16px;
    height: 1px;
    background: rgba(23, 22, 21, 0.075);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 7px 0 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) { grid-column: 2; grid-row: 2; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2) { grid-column: 3; grid-row: 2; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) { grid-column: 2 / 4; grid-row: 3; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo + .pjCbSeatsInfo {
    display: block !important;
    width: 100% !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.22;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:first-child {
    margin-bottom: 3px !important;
    color: #766e67;
    font-size: 0.74rem;
    font-weight: 650;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:last-child {
    color: var(--korso-ink);
    font-size: 0.86rem;
  }

  /* Explicit grid placement prevents the legacy float/order rules from visually swapping
     adult and child ticket controls. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    direction: ltr !important;
    gap: 18px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"] {
    display: flex !important;
    flex: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    align-items: center;
    text-align: center !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"]:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"]:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"] p.text-muted {
    width: 100%;
    margin: 0 0 6px !important;
    font-size: 0.86rem;
    text-align: center !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats .form-group {
    width: 100%;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbFormSeats .form-group {
    justify-content: center;
  }

  /* Preserve the source map's 450×350 coordinate system. Enlarging the inner layer
     cropped the edge seats on narrower desktop widths. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder {
    height: 350px !important;
    min-height: 350px !important;
    aspect-ratio: auto;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder > div {
    width: 450px !important;
    height: 350px !important;
    transform: none !important;
  }

  /* Each category reads as one compact field: its caption and selector share
     the same left edge, while the price remains attached to that selector. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"] {
    align-items: flex-start;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"] p.text-muted,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row .pjCbFormSeats .form-group {
    justify-content: flex-start;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatLegendRow {
    align-self: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsActions {
    margin-top: 18px !important;
    padding-top: 18px !important;
    background: rgba(247, 245, 241, 0.62) !important;
    border-top: 1px solid rgba(23, 22, 21, 0.075) !important;
  }
}

/* Keep the booking status visible in both layouts, including on the older
   booking-service template used by the local preview. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .tbAskToSelectTickets {
  height: auto;
  min-height: 0;
  margin: 0 0 10px !important;
  padding: 0 0 8px !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbTicketCard .tbAskToSelectTickets {
  display: block !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbTicketCard .tbSelectedSeatsLabel,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbTicketCard .tbTipToRemoveSeats {
  display: none !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapHint {
  display: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .pjCbPriceOperator {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
}

@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbTicketCard .pjCbSeatProgress {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 4px 0 14px;
    color: #5c5149;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbTicketCard .pjCbSeatProgressText {
    flex: 1 1 auto;
    min-width: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeats .pjCbTicketCard .pjCbSeatProgressTotal {
    flex: none;
    color: var(--korso-ink);
    white-space: nowrap;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder {
    height: 350px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder > div {
    width: 450px !important;
    height: 350px !important;
    min-width: 450px;
    margin: 0 !important;
    transform: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapRow .tbMapHolder:focus-visible {
    outline: 3px solid var(--korso-bronze);
    outline-offset: 3px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatMapHint {
    display: block;
    margin: 8px 0 0;
    color: #5c5149;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: center;
  }
}

/* Final mobile hierarchy: one divider under the film title, then the metadata. */
@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsSummaryCard--with-poster > .row:first-of-type {
    border-top: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbTicketCard .tbAskToSelectTickets {
    font-size: 1.25rem !important;
    line-height: 1.2;
    font-weight: 700;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row {
    margin-top: 10px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"] + [class*="col-"] {
    margin-top: 32px !important;
  }
}

/* Checkout follows the seat screen's desktop workspace: context and totals in
   the left rail, the actionable buyer form in the right rail. The mobile
   layout intentionally falls back to the existing single-column flow. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    grid-auto-rows: max-content;
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
    padding: 18px 28px 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview {
    grid-column: 1;
    grid-row: 1 / span 8;
    display: flex !important;
    flex-direction: column;
    align-self: stretch;
    width: auto !important;
    min-width: 0;
    gap: 18px !important;
    margin: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .pjCbFormTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .row,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .form-group,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .checkbox,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .alert {
    grid-column: 2;
    width: 100% !important;
    min-width: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .pjCbFormTitle {
    grid-row: 1;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .row,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .form-group,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .checkbox,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > .alert {
    grid-row: auto;
  }

  /* The checkout summary is now the compact left rail. Give its metadata a
     stable label/value rhythm so the rail does not make dates and prices
     wrap one word at a time. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr;
    column-gap: 16px !important;
    align-content: start;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 88px;
    height: 132px;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    margin: 0 0 10px;
    padding: 0 0 10px;
    font-size: 1.35rem;
    line-height: 1.15;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) {
    grid-column: 2;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr);
    width: 100% !important;
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) > .pjCbSeatsInfo {
    min-width: 0;
    min-height: 32px;
    margin: 0 !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075);
    font-size: 0.78rem;
    line-height: 1.2;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) > .pjCbSeatsInfo:first-child {
    grid-column: 1;
    padding-right: 8px !important;
    color: #766e67;
    font-weight: 650;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) > .pjCbSeatsInfo:last-child {
    grid-column: 2;
    justify-content: flex-start;
    color: var(--korso-ink);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: left !important;
    white-space: nowrap;
  }
}

/* Final checkout rollback: keep the buyer form in the widget's original
   document flow while the seat screen retains its own desktop composition. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats {
    display: block !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats > * {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbBody.pjCbSeats
    .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    width: 104px;
    height: 156px;
  }
}

/* Authoritative checkout composition: summary/buyer on the left, payment and
   seller on the right, matching the seat-map workspace. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr) !important;
    grid-auto-rows: max-content;
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
    padding: 18px 28px 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr) !important;
    grid-template-rows: max-content max-content;
    gap: 18px 20px;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"] {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbFormTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .form-group,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .checkbox {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbFormTitle {
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 26px 30px 16px !important;
    border: 1px solid rgba(205, 187, 168, 0.58);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 30px 24px !important;
    border-left: 1px solid rgba(205, 187, 168, 0.58);
    border-right: 1px solid rgba(205, 187, 168, 0.58);
    background: rgba(247, 245, 241, 0.72);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) ~ .row {
    display: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) > [class*="col-"] {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) > [class*="col-"]:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) > [class*="col-"]:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .form-group,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .checkbox {
    grid-row: auto !important;
    margin: 0 !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    background: rgba(247, 245, 241, 0.72);
    border-left: 1px solid rgba(205, 187, 168, 0.58);
    border-right: 1px solid rgba(205, 187, 168, 0.58);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .form-group {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .checkbox {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(205, 187, 168, 0.58);
    border-radius: 0 0 20px 20px;
  }

  /* The overview has three peers at checkout: film context, payment and
     seller. Keep each card on the same row instead of stacking the right rail. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: max-content;
    align-items: stretch;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(1),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(2),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(3) {
    grid-row: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(1) {
    grid-column: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(2) {
    grid-column: 2 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:nth-child(3) {
    grid-column: 3 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    transform: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row > [class*="col-"]:first-child {
    grid-column: 1 !important;
    justify-self: stretch !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row > [class*="col-"]:last-child {
    grid-column: 2 !important;
    justify-self: stretch !important;
    text-align: right !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:last-child {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > p.lead.pjCbSeatsInfo:last-child,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > p.lead.pjCbSeatsInfo:last-child > strong {
    display: block !important;
    width: 100% !important;
    text-align: right !important;
    white-space: nowrap;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > p.lead.pjCbSeatsInfo:last-child {
    font-size: 0.72rem !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row {
    display: grid !important;
    flex-direction: initial !important;
    align-items: stretch !important;
    justify-content: initial !important;
    width: 100% !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(3) > .well {
    display: block !important;
    height: 100% !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well {
    height: 100% !important;
    min-height: 245px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(3) > .well > .pjCbSeatsTitle {
    text-align: left !important;
    margin-bottom: 18px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(3) > .well > .row {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(3) > .well > .row > p {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row:last-child {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) {
    padding-top: 18px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster::after {
    right: auto !important;
    width: 122px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    display: inline-block !important;
    width: max-content !important;
    max-width: 100%;
    font-size: 1.1rem !important;
    padding-right: 8px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    width: 100% !important;
    margin: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row > [class*="col-"]:last-child {
    text-align: right !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row > [class*="col-"]:first-child {
    text-align: left !important;
  }

  /* Payment card rhythm: keep every label on one left edge and every amount
     on one right edge, with the total treated as the same visual system. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well > .pjCbTicketCard > .row:not(:last-child) {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 18px !important;
    min-height: 22px !important;
    align-items: center !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well > .pjCbTicketCard > .row:not(:last-child) > [class*="col-"] {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    white-space: nowrap;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well > .pjCbTicketCard > .row:not(:last-child) > [class*="col-"]:first-child {
    font-weight: 600 !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well > .pjCbTicketCard > .row:not(:last-child) > [class*="col-"]:last-child {
    font-weight: 700 !important;
    text-align: right !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well > .pjCbTicketCard > .row:last-child {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 18px !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 13px 16px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well > .pjCbTicketCard > .row:last-child > [class*="col-"] {
    white-space: nowrap;
  }

  /* Final payment-card override: the well and ticket card are the same node. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:not(:last-child) {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 18px !important;
    min-height: 22px !important;
    align-items: center !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:not(:last-child) > [class*="col-"] {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    white-space: nowrap;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:not(:last-child) > [class*="col-"]:first-child {
    font-weight: 600 !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:not(:last-child) > [class*="col-"]:last-child {
    font-weight: 700 !important;
    text-align: right !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:last-child {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    column-gap: 18px !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 13px 16px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:last-child > [class*="col-"] {
    white-space: nowrap;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:last-child {
    width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border: 1px solid #171615 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row > [class*="col-"] {
    display: block !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(3) > .well > .pjCbSeatsTitle {
    margin-bottom: 10px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster::after {
    display: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTermsConsentLabel > .pjCbTermsLink {
    transform: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTermsConsentLabel {
    column-gap: 8px !important;
    gap: 8px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTermsConsentLabel > .pjCbTermsLink {
    font-size: 13.44px !important;
    line-height: 18.816px !important;
    color: rgb(118, 110, 103) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbCName) > [class*="col-"],
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbCEmail) > [class*="col-"] {
    transform: translateX(0) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .pjCbSeatsPoster {
    align-self: center !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:last-child {
    margin-top: 16px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbCName) {
    padding-bottom: 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats img[src*="pjActionCaptcha"] {
    box-sizing: border-box !important;
    border: 1px solid rgba(23, 22, 21, 0.11) !important;
    border-radius: 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:last-child {
    border-color: rgba(23, 22, 21, 0.11) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut .form-group > label[for="pjCbCName"],
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut .form-group > label[for="pjCbCEmail"],
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut .form-group > label[for="pjCbCaptcha"] {
    transform: translateX(12px) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbFormTitle {
    padding-left: 42px !important;
  }
}

/* Final checkout sizing pass: match Preview's larger top cards while
   compressing the buyer form's vertical rhythm. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"] > .well {
    height: 317px !important;
    min-height: 317px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard {
    height: 317px !important;
    min-height: 317px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbFormTitle {
    padding: 18px 30px 12px 42px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbCName) {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbCName) > [class*="col-"] .form-group {
    margin-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .form-group.required {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .checkbox.pjCbTermsConsent {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }
}

@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats {
    display: block !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"] {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Match Checkout's internal card content to the larger Preview rhythm. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .pjCbSeatsOverview {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    display: block !important;
    width: 100% !important;
    min-height: 39px !important;
    margin-bottom: 10px !important;
    padding: 0 8px 14px 0 !important;
    border-bottom: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.025em !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo {
    min-height: 42px !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:first-child {
    padding-right: 12px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:last-child {
    font-size: 0.975rem !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard > .row > .pjCbSeatsInfo:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row:not(:last-child) {
    min-height: 42px !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:not(:last-child) {
    min-height: 42px !important;
    padding: 9px 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row:not(:last-child) > [class*="col-"] {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTicketCard > .row:not(:last-child) > [class*="col-"]:last-child {
    font-size: 0.975rem !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:not(:last-child) > [class*="col-"] {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsOverview > [class*="col-"]:nth-child(2) > .well.pjCbTicketCard > .row:not(:last-child) > [class*="col-"]:last-child {
    font-size: 0.975rem !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > p.lead.pjCbSeatsInfo:last-child {
    font-size: 0.975rem !important;
  }
}

/* Preview total: use the same bordered, padded total panel as Checkout. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewPayment > .form-horizontal:nth-of-type(4) {
    box-sizing: border-box;
    width: calc(100% + 24px) !important;
    min-height: 52px;
    height: 52px;
    margin: 16px -12px 0 !important;
    padding: 0 12px;
    border: 1px solid rgba(23, 22, 21, 0.11);
    border-radius: 14px;
    background: rgba(152, 101, 64, 0.075);
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewPayment > .form-horizontal:nth-of-type(4) > .form-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    min-height: 50px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewPayment > .form-horizontal:nth-of-type(4) > .form-group > label:first-child {
    padding: 0;
    color: var(--korso-ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
  }

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewPayment > .form-horizontal:nth-of-type(4) > .form-group > label:last-child {
  padding: 0;
  color: var(--korso-bronze);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
}

/* Checkout film details: match Preview's larger value type while retaining
   the same label scale and row rhythm. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo.lead,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo.lead > strong {
  font-size: 0.975rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* Keep both summary posters aligned to the first detail field rather than
   floating above the Date row. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .pjCbSeatsPoster,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary--with-poster > .pjCbPreviewPoster {
  grid-row: 2 / -1 !important;
  align-self: start !important;
}
}

/* Mobile Checkout controls: use the same restrained input border for the
   consent checkbox and CAPTCHA as the name/e-mail fields. */
@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut input[type="checkbox"][name="terms"] {
    border: 1px solid rgba(23, 22, 21, 0.13) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTermsConsentLabel {
    gap: 8px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbTermsConsentLabel > .pjCbTermsLink {
    font-size: 13.44px !important;
    line-height: 18.816px !important;
    transform: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut img[src*="pjActionCaptcha"] {
    box-sizing: border-box !important;
    border: 1px solid rgba(23, 22, 21, 0.11) !important;
    border-radius: 12px !important;
  }
}

/* Keep payment-method controls out of the mobile Checkout form. */
@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(#pjCbPaymentMethod),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row:has(.tbBankWrap) {
    display: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFormCheckOut > .pjCbBody.pjCbSeats > .row.tbCcWrap:not(.pjCbSeatsOverview):not(.pjCbSeatMapRow):not(.pjCbSeatLegendRow) {
    display: none !important;
  }
}

/* Keep the mobile Terms dialog fully inside the viewport so its header is
   never clipped when the consent link is opened near the bottom of the form. */
@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal.pjCbTermsModal {
    box-sizing: border-box;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow-y: auto !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-dialog {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 24px auto !important;
    transform: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-content {
    max-height: calc(100vh - 68px) !important;
    min-height: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-body > p:nth-of-type(1),
  #pjForm [id^="pjWrapperTicketBooking_"] #scTermModal .modal-body > p:nth-of-type(2) {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* At tablet widths the checkout poster is intentionally hidden. Collapse the
   summary card to one content column so its details align with the other cards. */
@media only screen and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    display: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2),
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) {
    grid-column: 1 !important;
  }
}

/* Tablet summary cards keep the poster beside the details, but start it on
   the same row as Date rather than beside the film title. */
@media only screen and (min-width: 561px) and (max-width: 820px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 24px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 104px !important;
    height: 156px !important;
    align-self: start !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbSeatsSummaryCard--with-poster > div.row {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary--with-poster {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary--with-poster > .pjCbPreviewPoster {
    grid-column: 1 !important;
    grid-row: 2 / -1 !important;
    align-self: start !important;
  }
}

/* Keep the Preview back arrow visually separated from its label. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutBackAction > span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBackAction {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsBackAction > .pjCbBtnLabel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media only screen and (max-width: 560px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewBuyer > .row > [class*="col-"] + [class*="col-"] {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* Stretch the seat progress row to the ticket card edges instead of centering
   it inside the first Bootstrap column. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard > .row:first-child > .col-xs-12 {
  align-items: stretch !important;
  text-align: left !important;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsOverview .pjCbTicketCard .pjCbSeatProgress {
  width: 100% !important;
}

@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain .pjCbSeatsSummaryCard--with-poster::after {
    right: auto !important;
    width: 180px !important;
  }
}

/* Give the widescreen seat-selection shell a little more vertical air while
   preserving the existing map proportions. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbHeading {
    min-height: 84px !important;
    padding: 20px 32px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats {
    grid-template-rows: 440px 52px !important;
    row-gap: 16px !important;
    padding: 26px 32px 22px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbFoot {
    min-height: 90px !important;
    padding: 24px 28px 22px !important;
  }
}

/* Use the added widescreen height for the seating artwork itself. The map
   layer and its seat controls scale together, so the map keeps its original
   proportions while the flexible black surround remains secondary. */
@media only screen and (min-width: 1100px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatMapRow {
    height: 444px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatMapRow .tbMapHolder {
    height: 440px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatMapRow .tbMapHolder > div {
    transform: scale(1.257142857) !important;
    transform-origin: center center !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats {
    grid-template-rows: 440px 160px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatLegendRow {
    align-self: end !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbTicketCard {
    display: flex !important;
    flex-direction: column !important;
    height: 318px !important;
    min-height: 318px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbTicketCard.pjCbTicketCard--empty {
    height: auto !important;
    min-height: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbTicketCard > .row:last-child {
    margin-top: auto !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbTicketCard.pjCbTicketCard--empty > .row:last-child {
    margin-top: 12px !important;
  }

  /* Match the screening summary to the poster-and-details card used by
     Checkout and Preview instead of the older three-column seat layout. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    column-gap: 24px !important;
    height: 280px !important;
    min-height: 280px !important;
    padding: 28px 30px !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster::after {
    display: none !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster {
    grid-column: 1 !important;
    grid-row: 2 / 5 !important;
    width: 104px !important;
    height: 156px !important;
    align-self: start !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 68px !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 0 0 13px !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
    font-size: clamp(1.3rem, 1.8vw, 1.55rem) !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(112px, 1.1fr) minmax(0, 0.9fr) !important;
    align-content: start !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(1) { grid-row: 2 !important; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(2) { grid-row: 3 !important; }
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:nth-of-type(3) { grid-row: 4 !important; }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(23, 22, 21, 0.075) !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row:last-of-type > .pjCbSeatsInfo {
    border-bottom: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:first-child {
    grid-column: 1 !important;
    padding-right: 12px !important;
    color: #766e67 !important;
    font-weight: 650 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster > .row > .pjCbSeatsInfo:last-child {
    grid-column: 2 !important;
    justify-content: flex-end !important;
    color: var(--korso-ink) !important;
    font-size: 0.9rem !important;
    text-align: right !important;
  }
}

/* ===== Final film-title + adult-only ticket column pass (rev 20260922-1). =====
   Appended last so it wins the existing !important cascade. Widescreen only:
   the mobile/tablet flow is untouched. Poster dimensions are unchanged. */
@media only screen and (min-width: 821px) {
  /* Film titles on the seat-map, checkout and preview screens: left-aligned,
     one shared responsive size, sitting in the text column (2) so the poster
     top edge and the title top edge line up on grid row 1. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard .pjCbSeatsTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary .pjCbPaymentTitle {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 0 0 12px !important;
    color: var(--korso-ink) !important;
    font-size: clamp(1.65rem, 2vw, 2rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
  }

  /* Grid placement only applies when the poster creates the first column. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsTitle,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary--with-poster .pjCbPaymentTitle {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: start !important;
  }

  /* Start both posters on grid row 1 so their top edge matches the title's. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbPreviewSummary--with-poster > .pjCbPreviewPoster {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    align-self: start !important;
  }

  /* Adult-only ticket card: the single ticket-type column is both the first
     and the last child, so the legacy :last-child rule would otherwise move
     it into the right-hand grid column. Pin it to column 1 and left-align
     its label and number dropdown/form controls. */
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"]:only-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"]:only-child p.text-muted,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain .pjCbSeatsOverview .pjCbTicketCard > .row + .row > [class*="col-"]:only-child .pjCbFormSeats .form-group {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* Start the wide ticket card at its content height. Once a ticket quantity is
   selected, restore the expanded card so the ticket controls can sit low in
   the panel. :has() reacts directly to the live selected option. */
@media only screen and (min-width: 1100px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbTicketCard:not(:has(.pjCbFormSeats .tbTicketSelector option:checked:not([value="0"]))) {
    height: auto !important;
    min-height: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbTicketCard:not(:has(.pjCbFormSeats .tbTicketSelector option:checked:not([value="0"]))) > .row:last-child {
    margin-top: 12px !important;
  }
}

/* Let the overview row grow with wrapped selected-seat chips so its lower
   edge stays above the navigation footer. Keep the established map and legend
   row heights as minimums. */
@media only screen and (min-width: 821px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats {
    grid-template-rows: minmax(440px, max-content) minmax(52px, max-content) !important;
  }
}

@media only screen and (min-width: 1100px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats {
    grid-template-rows: minmax(440px, max-content) minmax(64px, max-content) !important;
  }
}

/* Enlarge the seat-screen poster while preserving its 2:3 artwork ratio. Let
   the summary card size itself to the title and screening details, so it can
   contract for short content and grow when translated text wraps. */
@media only screen and (min-width: 1100px) {
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    column-gap: 20px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster,
  #pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain > .pjCbBody.pjCbSeats .pjCbSeatsSummaryCard--with-poster .pjCbSeatsPoster img {
    width: 120px !important;
    height: 180px !important;
    object-fit: cover !important;
  }
}

/* Temporarily hide the duplicate cancel actions on all booking steps. Their
   controls are moved into the headers by application.src.js after load, so
   cover both the original footer and relocated header positions. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain:not(.pjCbCheckoutMain) > .pjCbHeading > .pjCbSeatsHeaderCancel,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbSeatsMain:not(.pjCbCheckoutMain) .pjCbSeatsActions button.pjCbBtnSecondary,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain > .pjCbHeading > .pjCbCheckoutHeaderCancel,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbCheckoutMain .pjCbFoot .tbCancelToSeats,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain > .pjCbHeading > .pjCbPreviewHeaderCancel,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbPreviewMain .pjCbFoot .tbCancelToCheckout {
  display: none !important;
}

/* Film titles and posters lead to the film's own details and upcoming-screenings page. */
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieIntroImage .korsoMoviePageLink {
  display: block;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTitle .korsoMoviePageLink {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTitle .korsoMoviePageLink:hover,
#pjForm [id^="pjWrapperTicketBooking_"] .pjCbEventRow .pjCbMovieTitle .korsoMoviePageLink:focus-visible {
  color: var(--korso-bronze, #986540);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}