/* ============ SAF skin over the legacy booking flow ============ */
/* Loaded before sanesquare.css (which getTicket nests later), hence
   the !important density. Scoped under body.saf so nothing leaks if
   this file is ever included elsewhere. */

/* page ground: kill the old green tint */
body.saf #team,
body.saf #datetimepicker12 {
  background-color: #fff !important;
}
body.saf #team .content { color: var(--saf-ink); }

/* Frame: 50px clearance under the header; content start-aligned
   (left in LTR, right in RTL) instead of Bootstrap's centered
   .container. Logical properties handle both directions. Bootstrap's
   internal 15px column gutters are kept so form rows stay usable. */
body.saf #team { padding-top: 50px; }
body.saf #team .container {
  max-width: none !important;
  width: auto !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
body.saf #team .row { margin-inline: 0 !important; }
/* Bootstrap cancels a column's 15px gutter with the row's -15px margin.
   Zeroing that margin (above, to stop the row overflowing the flush
   container) left the gutter uncancelled, so the whole flow sat 15px
   inside the header rule, the h3 and the footer. Drop it on the column
   that wraps the flow; rows nested inside the panes keep their gutters. */
body.saf #team .container > .row > .col-md-12 { padding-inline: 0 !important; }
/* the gutter was also all that kept content off the screen edge on small
   screens, so replace it with the header's own mobile padding */
@media (max-width: 860px) {
  body.saf #team { padding-inline: 20px; }
}

/* headings inside the flow */
body.saf #team h3 {
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  text-transform: uppercase;
  color: var(--saf-black) !important;
}
[dir="rtl"] body.saf #team h3 { text-transform: none; font-weight: 700; }

/* step tabs */
body.saf .widget-tabs {
  background: var(--saf-white) !important;
  border-bottom: 1px solid var(--saf-line) !important;
}
body.saf .widget-tabs > li > a {
  font-family: var(--font-cond) !important;
  font-size: 14px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--saf-gray) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}
body.saf .widget-tabs > li.active > a {
  color: var(--saf-black) !important;
  border-bottom-color: var(--saf-black) !important;
}
body.saf .widget-tabs > li.inactive > a { color: #b5b8be !important; }
[dir="rtl"] body.saf .widget-tabs > li > a { letter-spacing: 0; }

/* primary flow buttons (btn-warning = legacy primary) */
body.saf .btn.btn-warning,
body.saf .btn.btn-primary,
body.saf .btn.btn-danger {
  font-family: var(--font-cond) !important;
  font-size: 14px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--saf-black) !important;
  border: 1.5px solid var(--saf-black) !important;
  color: var(--saf-white) !important;
  border-radius: 2px !important;
  padding: 10px 24px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.saf .btn.btn-warning:hover, body.saf .btn.btn-warning:focus,
body.saf .btn.btn-primary:hover, body.saf .btn.btn-primary:focus,
body.saf .btn.btn-danger:hover, body.saf .btn.btn-danger:focus {
  background: var(--saf-white) !important;
  color: var(--saf-black) !important;
}
body.saf .btn.btn-default {
  border-radius: 2px !important;
  border: 1.5px solid var(--saf-black) !important;
  background: var(--saf-white) !important;
  color: var(--saf-black) !important;
  text-shadow: none !important;
}
[dir="rtl"] body.saf .btn { letter-spacing: 0; }

/* forms */
body.saf #team .form-control,
body.saf #team select,
body.saf #team input[type="text"],
body.saf #team input[type="email"] {
  border: 1px solid var(--saf-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  color: var(--saf-ink) !important;
}
body.saf #team .form-control:focus { border-color: var(--saf-black) !important; }
body.saf #team label { font-weight: 500; color: var(--saf-ink); }
body.saf #team .input-group-addon {
  background: var(--saf-panel) !important;
  border: 1px solid var(--saf-line) !important;
  border-radius: 2px !important;
  cursor: pointer;
}

/* price/summary rows */
body.saf .rowbord {
  border-bottom: 1px solid var(--saf-line);
  padding: 8px 0;
}
body.saf .rowbord .chg, body.saf .rowbord .catTot { color: var(--saf-ink); }

/* chosen.js select skin — light touch, structure untouched */
body.saf .chosen-container-single .chosen-single {
  border: 1px solid var(--saf-line) !important;
  border-radius: 2px !important;
  background: var(--saf-white) !important;
  box-shadow: none !important;
  height: 34px !important;
  line-height: 32px !important;
}

/* week-panel booking grid (ticketBookingPageTEmplate) */
body.saf .panel-heading {
  background-color: var(--saf-white) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--saf-line) !important;
}
body.saf .WeekPanel a.pjCbDaysNav {
  font-family: var(--font-cond);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--saf-gray);
  padding: 8px 12px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
body.saf .WeekPanel a.pjCbDaysNav.active,
body.saf .WeekPanel a.pjCbDaysNav:hover {
  color: var(--saf-black);
  border-bottom-color: var(--saf-black);
}
body.saf .mob-date-select .btn.dropdown-toggle {
  background: var(--saf-white) !important;
  border: 1px solid var(--saf-line) !important;
  color: var(--saf-ink) !important;
}
body.saf .mob-date-select .dropdown-menu { background: var(--saf-white) !important; }
body.saf .erp-tbl { border-color: var(--saf-line) !important; }
body.saf .erp-tbl td { border-color: var(--saf-line) !important; }
body.saf .table-striped > tbody > tr:nth-of-type(odd) { background: #fafafa !important; }
body.saf .tbMovieLink {
  font-family: var(--font-demi) !important;
  text-decoration: none !important;
}
body.saf .movieList .row[style] { box-shadow: none !important; border-color: var(--saf-line) !important; }

/* ticketCalculation fragment: beat its repeated inline label styles */
body.saf #team .form-group > label[style] {
  color: var(--saf-ink) !important;
  background-color: var(--saf-panel) !important;
  border-radius: 2px !important;
  font-family: var(--font-body) !important;
}

/* bookingConfirmation fragment */
body.saf .badge.selected { background-color: var(--saf-black) !important; }
body.saf .modal-content { border-radius: 2px; }

/* countdown */
body.saf #timeLeftMins { color: var(--saf-black); }

/* ============ getTicket step header: numbered tabs + timer ============ */
body.saf .saf-steps {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; border-bottom: 1px solid var(--saf-line); margin-top: 8px;
}
/* Bootstrap floats .nav-tabs items left, which pins step 01 to the left
   edge in Arabic too, so the row reads 04-03-02-01. Flex items ignore
   float and honour the inherited direction, so the order follows the
   locale. The clearfix pseudo-elements have to be dropped or they become
   flex items and open a gap. */
body.saf .saf-steps .widget-tabs {
  flex: 1; border-bottom: 0 !important; margin-bottom: -1px;
  display: flex; flex-wrap: wrap;
  /* Bootstrap's .nav only zeroes padding-left. The UA default is
     padding-inline-start: 40px, so in Arabic the start padding survived
     and pushed the tabs 40px in from the rail edge. */
  padding-inline: 0;
  /* spacing comes from the flex gap now, so the first tab's label can sit
     flush with the heading instead of behind Bootstrap's link padding */
  gap: 0 30px;
}
body.saf .saf-steps .widget-tabs::before,
body.saf .saf-steps .widget-tabs::after { display: none; }
body.saf .saf-steps .widget-tabs > li { float: none; margin: 0; }
body.saf .saf-steps .widget-tabs > li > a {
  padding-inline: 0 !important; margin-inline: 0 !important;
}
body.saf .widget-tabs > li > a b {
  font-family: var(--font-demi); font-weight: 400; font-size: 12px;
  margin-inline-end: 6px;
}
body.saf .saf-hold {
  font-family: var(--font-cond); font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--saf-gray); white-space: nowrap;
}
body.saf .saf-hold #timeLeftMins {
  color: var(--saf-black); font-family: var(--font-demi); font-weight: 400;
}
[dir="rtl"] body.saf .saf-hold { letter-spacing: 0; }

/* ============ getTicket step 1: split panel ============ */
body.saf .saf-plan-sub {
  margin: 12px 0 0; color: #3c3f46; font-size: 15.5px; max-width: 60ch;
}
body.saf .saf-plan {
  display: grid; grid-template-columns: 370px 1px 1fr; gap: 0 40px;
  margin-top: 26px; align-items: start;
}
body.saf .saf-plan-rule { background: var(--saf-line); align-self: stretch; }
body.saf .saf-plan-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--saf-line);
}
body.saf .saf-plan-pick { font-size: 15px; color: #3c3f46; }
body.saf .saf-plan-pick b {
  font-family: var(--font-demi); font-weight: 400; color: var(--saf-black);
}
body.saf .saf-maint-msg { font-size: 14px; color: var(--saf-black); }
@media (max-width: 900px) {
  body.saf .saf-plan { grid-template-columns: 1fr; gap: 24px 0; }
  body.saf .saf-plan-rule { display: none; }
}

/* ============ getTicket step 1: calendar card ============ */
body.saf .saf-cal {
  border: 1px solid var(--saf-line); border-radius: 2px;
  padding: 18px 18px 14px; background: var(--saf-white);
}
body.saf .saf-cal .datepicker { width: 100%; padding: 0; }
body.saf .saf-cal .datepicker table {
  width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums;
}
body.saf .saf-cal .datepicker table thead th { background: none !important; border-radius: 0; }
body.saf .saf-cal .datepicker .datepicker-switch {
  font-family: var(--font-demi); font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--saf-black);
}
body.saf .saf-cal .datepicker th.prev,
body.saf .saf-cal .datepicker th.next { color: var(--saf-gray); }
body.saf .saf-cal .datepicker th.dow {
  font-family: var(--font-cond); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--saf-gray); font-weight: 400;
  padding: 6px 0;
}
body.saf .saf-cal .datepicker table tr td {
  height: 34px; width: 34px; border-radius: 2px; font-size: 13.5px;
  color: #111; border: 0;
}
body.saf .saf-cal .datepicker table tr td.day:hover {
  background: none; outline: 1px solid var(--saf-black); outline-offset: -1px;
}
body.saf .saf-cal .datepicker table tr td.old,
body.saf .saf-cal .datepicker table tr td.new { color: #cfcfcf; }
body.saf .saf-cal .datepicker table tr td.today,
body.saf .saf-cal .datepicker table tr td.today:hover {
  background: none !important; background-image: none !important;
  outline: 1px solid var(--saf-black); outline-offset: -1px;
  color: #111 !important; text-shadow: none;
}
body.saf .saf-cal .datepicker table tr td.active,
body.saf .saf-cal .datepicker table tr td.active:hover {
  background: var(--saf-black) !important; background-image: none !important;
  color: var(--saf-white) !important; text-shadow: none !important;
  border-radius: 2px;
}
body.saf .saf-cal .datepicker table tr td.disabled,
body.saf .saf-cal .datepicker table tr td.disabled:hover {
  color: #cfcfcf; cursor: not-allowed; background: none;
}
body.saf .saf-cal .datepicker table tr td.saf-mx,
body.saf .saf-cal .datepicker table tr td.saf-mx:hover {
  color: #9a9a9a; text-decoration: line-through;
  text-decoration-thickness: 1px; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, transparent 0 3px, #e8e8e8 3px 4.5px);
}
[dir="rtl"] body.saf .saf-cal .datepicker .datepicker-switch,
[dir="rtl"] body.saf .saf-cal .datepicker th.dow { letter-spacing: 0; }

body.saf .saf-cal-legend {
  display: flex; gap: 20px; margin-top: 12px;
  font-family: var(--font-cond); font-size: 11px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--saf-gray);
}
body.saf .saf-cal-legend em {
  font-style: normal; display: inline-flex; align-items: center; gap: 7px;
}
body.saf .saf-cal-legend .k { width: 13px; height: 13px; border-radius: 2px; }
body.saf .saf-cal-legend .k--sel { background: var(--saf-black); }
body.saf .saf-cal-legend .k--mx {
  background: repeating-linear-gradient(135deg, transparent 0 3px, #e2e2e2 3px 4.5px);
  border: 1px solid #eee;
}
[dir="rtl"] body.saf .saf-cal-legend { letter-spacing: 0; }

/* ============ getTicket step 1: time pills ============ */
body.saf .saf-slot-h {
  font-family: var(--font-demi); font-size: 13px; letter-spacing: .10em;
  text-transform: uppercase; color: var(--saf-gray);
  margin: 26px 0 10px; display: flex; align-items: center; gap: 14px;
}
body.saf #show_selec > .saf-slot-h:first-of-type { margin-top: 0; }
body.saf .saf-slot-h::after { content: ""; flex: 1; height: 1px; background: #ececec; }
body.saf .saf-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
body.saf .saf-slot {
  border: 1px solid #d9d9d9; border-radius: 2px; padding: 9px 8px 8px;
  text-align: center; cursor: pointer; background: var(--saf-white);
  display: block; width: 100%; font: inherit;
}
body.saf .saf-slot:hover, body.saf .saf-slot:focus-visible {
  border-color: var(--saf-black);
}
body.saf .saf-slot b {
  display: block; font-family: var(--font-demi); font-weight: 400;
  font-size: 15px; color: var(--saf-black); font-variant-numeric: tabular-nums;
}
body.saf .saf-slot i {
  display: block; font-style: normal; font-family: var(--font-cond);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #9a9a9a; margin-top: 3px;
}
body.saf .saf-slot--low i { color: var(--saf-black); font-family: var(--font-demi); }
body.saf .saf-slot.sel { background: var(--saf-black); border-color: var(--saf-black); }
body.saf .saf-slot.sel b { color: var(--saf-white); }
body.saf .saf-slot.sel i { color: #bdbdbd; }
body.saf .saf-slot--out { cursor: default; background: #fafafa; border-color: #ececec; }
body.saf .saf-slot--out b {
  color: #c4c4c4; text-decoration: line-through; text-decoration-thickness: 1px;
}
body.saf .saf-slot--out i { color: #c4c4c4; }
body.saf .saf-slots-empty { color: var(--saf-gray); font-size: 15px; margin: 4px 0 0; }
[dir="rtl"] body.saf .saf-slot-h,
[dir="rtl"] body.saf .saf-slot i { letter-spacing: 0; }

/* ============ getTicket step 2: order summary card ============ */
body.saf .saf-sum {
  border: 1px solid var(--saf-line); border-radius: 2px;
  padding: 18px 18px 16px; background: var(--saf-white);
}
body.saf .saf-sum h4 {
  font-family: var(--font-demi); font-weight: 400; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 14px; color: var(--saf-black);
}
[dir="rtl"] body.saf .saf-sum h4 { letter-spacing: 0; }
body.saf .saf-sum-r {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 0; border-top: 1px solid #ececec; font-size: 14.5px;
}
body.saf .saf-sum-r i {
  font-style: normal; font-family: var(--font-cond); font-size: 11.5px;
  letter-spacing: .10em; text-transform: uppercase; color: var(--saf-gray);
}
[dir="rtl"] body.saf .saf-sum-r i { letter-spacing: 0; }
body.saf .saf-sum-r b {
  font-family: var(--font-demi); font-weight: 400; color: var(--saf-black);
  text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.saf .saf-sum-r--total b { font-size: 17px; }

/* coupon: Bootstrap's table-cell input group relaid out as flex so the
   corners stay correct in both directions */
/* sanesquare.css floats this right with a 25% right margin, left over from
   when the coupon sat in a Bootstrap column — that held the field to about
   three quarters of the card. Full width, and separated by space alone
   rather than a rule, so it doesn't read as one more summary row. */
body.saf #couponCodeBlock {
  float: none; margin: 30px 0 0; padding-top: 0; border-top: 0;
}
body.saf #couponCodeBlock .input-group { display: flex; width: 100%; }
body.saf #couponCodeBlock .input-group .form-control {
  flex: 1; width: auto; border-radius: 2px 0 0 2px !important;
}
/* Apply is a button, so it carries the same treatment as .btn-warning
   rather than the grey addon panel Bootstrap gives input-group tails */
body.saf #couponCodeBlock .input-group .input-group-addon {
  display: flex; align-items: center; width: auto; white-space: nowrap;
  padding: 0 22px; cursor: pointer;
  font-family: var(--font-cond) !important; font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--saf-black) !important;
  border: 1.5px solid var(--saf-black) !important;
  color: var(--saf-white) !important;
  border-radius: 0 2px 2px 0 !important;
}
body.saf #couponCodeBlock .input-group .input-group-addon:hover,
body.saf #couponCodeBlock .input-group .input-group-addon:focus-visible {
  background: var(--saf-white) !important; color: var(--saf-black) !important;
}
[dir="rtl"] body.saf #couponCodeBlock .input-group .form-control {
  border-radius: 0 2px 2px 0 !important;
}
[dir="rtl"] body.saf #couponCodeBlock .input-group .input-group-addon {
  border-radius: 2px 0 0 2px !important; letter-spacing: 0;
}

/* ============ getTicket step 2: ticket rows + steppers ============ */
body.saf .saf-tk {
  display: grid; grid-template-columns: 1fr auto 96px; align-items: center;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--saf-line);
}
body.saf .saf-tk:first-child { padding-top: 0; }
body.saf .saf-tk-id b {
  display: block; font-family: var(--font-demi); font-weight: 400;
  font-size: 16px; color: var(--saf-black);
}
body.saf .saf-tk-id i {
  display: block; font-style: normal; font-family: var(--font-cond);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--saf-gray); margin-top: 2px;
}
[dir="rtl"] body.saf .saf-tk-id i { letter-spacing: 0; }
body.saf .saf-tk-tot {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #b9b9b9; text-align: end;
}
body.saf .saf-tk-tot .catTot {
  font-family: var(--font-demi); font-size: 15px; letter-spacing: 0;
  color: #b9b9b9; font-variant-numeric: tabular-nums;
}
body.saf .saf-tk.has-qty .saf-tk-tot { color: var(--saf-gray); }
body.saf .saf-tk.has-qty .saf-tk-tot .catTot { color: var(--saf-black); }
[dir="rtl"] body.saf .saf-tk-tot { letter-spacing: 0; }

/* numerals read left-to-right in both locales, so the control keeps a
   fixed minus-number-plus order */
body.saf .saf-step { display: inline-flex; align-items: center; direction: ltr; }
body.saf .saf-step-b {
  width: 34px; height: 34px; padding: 0; background: var(--saf-white);
  border: 1px solid #d9d9d9; border-radius: 2px; color: var(--saf-black);
  font-family: var(--font-demi); font-size: 17px; line-height: 1;
  cursor: pointer;
}
body.saf .saf-step-b:hover:not(:disabled),
body.saf .saf-step-b:focus-visible:not(:disabled) { border-color: var(--saf-black); }
body.saf .saf-step-b:disabled {
  color: #d9d9d9; border-color: #ececec; background: #fafafa; cursor: default;
}
body.saf .saf-step-n {
  min-width: 46px; text-align: center; font-family: var(--font-demi);
  font-size: 16px; color: var(--saf-black); font-variant-numeric: tabular-nums;
}

/* ============ getTicket step 2: fine print ============ */
body.saf .saf-fine {
  margin: 22px 0 0; padding-inline-start: 18px;
  font-size: 13px; line-height: 1.55; color: var(--saf-gray);
}
body.saf .saf-fine li { margin-bottom: 6px; }
body.saf .saf-fine a { color: var(--saf-black); text-decoration: underline; }

/* ============ getTicket step 3: review lines ============ */
body.saf .saf-rev {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--saf-line);
}
body.saf .saf-rev:first-child { padding-top: 0; }
body.saf .saf-rev-id b {
  display: block; font-family: var(--font-demi); font-weight: 400;
  font-size: 16px; color: var(--saf-black);
}
body.saf .saf-rev-id i {
  display: block; font-style: normal; font-family: var(--font-cond);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--saf-gray); margin-top: 2px;
}
[dir="rtl"] body.saf .saf-rev-id i { letter-spacing: 0; }
body.saf .saf-rev-tot {
  font-family: var(--font-cond); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--saf-gray); white-space: nowrap;
}
body.saf .saf-rev-tot span {
  font-family: var(--font-demi); font-size: 15px; letter-spacing: 0;
  color: var(--saf-black); font-variant-numeric: tabular-nums;
}
[dir="rtl"] body.saf .saf-rev-tot { letter-spacing: 0; }
/* rows for categories nobody booked are hidden by saf.js */
body.saf .saf-rev.is-empty { display: none; }

/* ============ steps 3 & 4: checkbox rows ============ */
body.saf .saf-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 22px 0 0; font-weight: 400; font-size: 14.5px;
  color: var(--saf-ink); cursor: pointer;
}
body.saf .saf-check input[type="checkbox"] {
  width: 17px; height: 17px; margin: 2px 0 0; flex: none; cursor: pointer;
}
body.saf .saf-check a { color: var(--saf-black); text-decoration: underline; }

/* ============ getTicket step 4: details form ============ */
body.saf .saf-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
}
body.saf .saf-field--wide { grid-column: 1 / -1; }
body.saf .saf-field label {
  display: block; font-family: var(--font-cond); font-size: 11.5px;
  letter-spacing: .10em; text-transform: uppercase; color: var(--saf-gray);
  margin-bottom: 6px; font-weight: 400;
}
[dir="rtl"] body.saf .saf-field label { letter-spacing: 0; }
body.saf .saf-field .form-control { height: 40px; width: 100%; }
/* intlTelInput wraps the phone input in its own container */
body.saf .saf-field .intl-tel-input { display: block; width: 100%; }

/* ============ validation: inline field errors + toasts ============ */
/* Errors are the one place the monochrome system takes an accent. The
   mark carries the meaning as well as the colour, so nothing depends on
   hue alone. */
/* 2px, not 1.5 — a fractional border floors to 1px at standard density
   and the field stops reading as flagged */
body.saf .form-control.saf-invalid,
body.saf #team .form-control.saf-invalid {
  border-color: var(--saf-red) !important; border-width: 2px !important;
}
body.saf .saf-err {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 7px;
  font-family: var(--font-cond); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--saf-red-ink);
}
body.saf .saf-err-mk {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--saf-red); color: var(--saf-white);
  font-family: var(--font-demi); font-size: 10px; line-height: 14px;
  text-align: center;
}
[dir="rtl"] body.saf .saf-err { letter-spacing: 0; }

/* toasts carry everything that is not about a single field, and stay
   monochrome so they never compete with the inline errors */
/* The rail spans the page column rather than the viewport, so a toast
   lines up with the content edge instead of floating in the margin on
   wide screens. Same max-width + auto margins as body.saf, so the two
   stay centred together; the host is click-through. */
body.saf .saf-toasts {
  position: fixed; inset-block-end: 20px; inset-inline: 0;
  max-width: var(--saf-page-max); margin-inline: auto;
  z-index: 9999; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px;
  pointer-events: none;
}
body.saf .saf-toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--saf-black); color: var(--saf-white);
  border-radius: 2px; padding: 12px 16px; max-width: 340px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
body.saf .saf-toast.is-in { opacity: 1; transform: none; }
body.saf .saf-toast .saf-err-mk {
  background: var(--saf-white); color: var(--saf-black);
  width: 16px; height: 16px; line-height: 16px; margin-top: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body.saf .saf-toast { transition: none; }
}
/* follow the flow's own mobile padding so the toast keeps its edge */
@media (max-width: 860px) {
  body.saf .saf-toasts { padding-inline: 20px; }
}
@media (max-width: 520px) {
  body.saf .saf-toasts { inset-block-end: 14px; align-items: stretch; }
  body.saf .saf-toast { max-width: none; }
}

@media (max-width: 900px) {
  /* stacked: choose first, summary follows */
  body.saf #ticket .saf-plan > div:first-child,
  body.saf #basket .saf-plan > div:first-child,
  body.saf #userdetails .saf-plan > div:first-child { order: 2; }
}
@media (max-width: 520px) {
  body.saf .saf-tk { grid-template-columns: 1fr auto; row-gap: 8px; }
  body.saf .saf-tk-tot { grid-column: 2; }
  body.saf .saf-form { grid-template-columns: 1fr; }
}