/* End of the First Class trial (airshow_trial_fares.js): two paper boarding-pass stubs, Economy and First, with the
   class band of the member boarding passes (Economy green, First blue to lilac) and the seat each class prints
   (58K, 01A). The fares are the buttons: the yearly one in navy with the saving under it, the monthly one outlined.
   In flight the cabin lights dim from the floor up and the tickets rise under the flight, which stays on screen;
   on the startup screen the same tickets sit in the "trial ended" step. */
.trial-fares {
  --tf-paper: #f8f6f1;
  --tf-ink: #17182d;
  --tf-text: #3b3d52;
  --tf-muted: #6a6b7c;
  --tf-rule: rgba(23, 24, 45, 0.26);
  --tf-navy: #1d0d78;
  --tf-navy-hover: #2d1ba8;
  --tf-band-eco: linear-gradient(#cdeebc, #cdeebc);
  --tf-band-first: linear-gradient(90deg, #96b8ff, #cf9eff);
  font-family: var(--airshow-ui-font-family, "Pretendard Variable", sans-serif);
  container-type: inline-size;
}
.trial-fares-tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}

/* --- A ticket: band, class and seat, what it keeps; then a perforated stub that holds the two fares --------- */
.trial-fare {
  --tf-band: var(--tf-band-eco);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--tf-paper);
  color: var(--tf-ink);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.trial-fare.is-first { --tf-band: var(--tf-band-first); }
.trial-fare-main {
  flex: 1 1 auto;
  padding: 18px 20px 16px;
  background: var(--tf-band) top / 100% 8px no-repeat, var(--tf-paper);
}
.trial-fare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 0;
}
.trial-fare-name {
  font-size: 23px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.trial-fare-seat {
  flex: none;
  padding: 4px 10px 3px;
  border: 1.5px solid var(--tf-ink);
  border-radius: 999px;
  font: 590 15px/1 "BoardingPass", "Courier New", monospace;
  letter-spacing: -0.04em;
}
.trial-fare-tag {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tf-muted);
}
.trial-fare-keeps {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.trial-fare-keeps li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--tf-text);
}
/* Included: a navy tick. Auto-play only: a half-filled ring. Not included: a dash, in grey type. */
.trial-fare-keeps li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.18em;
  width: 14px;
  height: 14px;
  background: var(--tf-navy);
  -webkit-mask: var(--tf-mark) center / contain no-repeat;
          mask: var(--tf-mark) center / contain no-repeat;
}
.trial-fare-keeps li.is-yes { --tf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.trial-fare-keeps li.is-part { --tf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M7 1.8a5.2 5.2 0 0 1 0 10.4z'/%3E%3C/svg%3E"); }
.trial-fare-keeps li.is-no { color: var(--tf-muted); }
.trial-fare-keeps li.is-no::before {
  --tf-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7h7' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background: var(--tf-muted);
}

/* The stub, below a printed tear line like the one on the member boarding passes. */
.trial-fare-stub {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px;
}
.trial-fare-stub::before { content: ""; position: absolute; inset: 0 0 auto; border-top: 1.5px dashed var(--tf-rule); }

/* --- The fares: term and saving on the left, the price on the right ------------------------------------ */
.trial-fare-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 16px 8px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.trial-fare-buy.is-year { border: 0; background: var(--tf-navy); color: #fff; }
.trial-fare-buy.is-year:hover,
.trial-fare-buy.is-year:focus-visible { background: var(--tf-navy-hover); }
.trial-fare-buy.is-month {
  min-height: 52px;
  border: 1.5px solid rgba(29, 13, 120, 0.4);
  background: transparent;
  color: var(--tf-ink);
}
.trial-fare-buy.is-month:hover,
.trial-fare-buy.is-month:focus-visible {
  border-color: var(--tf-navy);
  background: rgba(29, 13, 120, 0.06);
}
.trial-fare-buy:focus-visible { outline: 2px solid #004aad; outline-offset: 2px; }
.trial-fare-term {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.trial-fare-term small {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.25;
  color: #d9d2ff;
}
.trial-fare-price {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}
.trial-fare-price b {
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.trial-fare-buy.is-month .trial-fare-price b { font-size: 23px; }

.trial-fares-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.3;
}
.trial-fares-life {
  padding: 4px 2px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trial-fares-fine { color: rgba(255, 255, 255, 0.56); }
.trial-fares-life:hover { color: #fff; }
.trial-fares-life:focus-visible,
.trial-end-leave:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- In flight: lights dim from the floor up, the tickets rise under the flight ----------------------- */
.trial-end {
  position: fixed;
  inset: 0;
  z-index: 2612; /* over the docks and the trial countdown (2608), under the share sheets (3000+) */
  font-family: var(--airshow-ui-font-family, "Pretendard Variable", sans-serif);
  color: #fff;
  background: linear-gradient(180deg, rgba(5, 4, 22, 0.12) 0%, rgba(5, 4, 22, 0.2) 44%, rgba(5, 4, 22, 0.9) 60%, rgba(5, 4, 22, 0.98) 76%);
  opacity: 0;
  transition: opacity 0.24s ease-out;
}
.trial-end.open { opacity: 1; }
/* The map's credit line sits above everything; like the other full-screen panels, the sheet puts it away. */
body.airshow-trial-ended-open #map-credit-anchor,
body.airshow-trial-ended-open #map-credit-anchor .cesium-widget-credits,
body.airshow-trial-ended-open #map-credit-anchor .cesium-credit-expand-link {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* The words on the left, the two tickets on the right, all below the middle of the screen where the flight is. */
.trial-end-sheet {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3.6vh, 44px);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 740px);
  align-items: center;
  gap: 0 44px;
  width: min(1084px, calc(100% - 48px));
  transform: translate(-50%, 18px);
  outline: none;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trial-end.open .trial-end-sheet { transform: translate(-50%, 0); }
.trial-end-head { position: relative; }
.trial-end-flight {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.trial-end-flight b { margin-right: 6px; font-weight: 750; color: #fff; }
.trial-end-flight span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
}
.trial-end-title {
  margin: 0;
  font-size: 36px;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.trial-end-lede {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.84);
  text-wrap: pretty;
}
.trial-end-leave {
  margin: 18px 0 0 -2px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.36);
  text-underline-offset: 3px;
  cursor: pointer;
}
.trial-end-leave:hover { color: #fff; }

/* --- On the startup screen: the same tickets inside the "trial ended" step --------------------------- */
.startup-ticket-empty.startup-trial-ended {
  justify-content: safe center;
  gap: 0;
  padding: 8px clamp(16px, 3vw, 40px) 0;
}
.startup-trial-ended .startup-ticket-empty-title {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: none;
}
.startup-trial-ended .startup-ticket-empty-note {
  margin-top: 8px;
  font-size: 17px;
  color: rgba(236, 246, 255, 0.84);
  text-shadow: none;
}
.startup-trial-ended .trial-fares {
  width: min(760px, 100%);
  margin-top: 22px;
}

/* --- Short screens (phones on their side): tighter tickets, the two fares side by side ----------------- */
/* data-fit is set by the script from the screen the app is laid out on (also a phone held upright). */
[data-fit="compact"] .trial-fares-tickets { gap: 12px; }
[data-fit="compact"] .trial-fare { border-radius: 8px; }
[data-fit="compact"] .trial-fare-main {
  padding: 9px 14px 8px;
  background-size: 100% 6px, auto;
}
[data-fit="compact"] .trial-fare-head { margin-top: 3px; }
[data-fit="compact"] .trial-fare-name { font-size: 18px; }
[data-fit="compact"] .trial-fare-seat { padding: 3px 8px 2px; font-size: 13px; }
[data-fit="compact"] .trial-fare-tag { display: none; }
[data-fit="compact"] .trial-fare-keeps { gap: 3px 10px; margin-top: 6px; }
/* Wide enough (a phone's full width), the four lines go two by two. */
@container (min-width: 760px) {
  [data-fit="compact"] .trial-fare-keeps { grid-template-columns: 1fr 1fr; }
}
[data-fit="compact"] .trial-fare-keeps li {
  padding-left: 17px;
  font-size: 12.5px;
  line-height: 1.3;
}
[data-fit="compact"] .trial-fare-keeps li::before { width: 12px; height: 12px; }
[data-fit="compact"] .trial-fare-stub {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
}
[data-fit="compact"] .trial-fare-buy,
[data-fit="compact"] .trial-fare-buy.is-month {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 11px;
}
[data-fit="compact"] .trial-fare-term {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
}
[data-fit="compact"] .trial-fare-term small { font-size: 12px; white-space: nowrap; }
[data-fit="compact"] .trial-fare-term small span { display: none; }
[data-fit="compact"] .trial-fare-price { font-size: 12px; }
[data-fit="compact"] .trial-fare-price b,
[data-fit="compact"] .trial-fare-buy.is-month .trial-fare-price b { font-size: 21px; }
[data-fit="compact"] .trial-fares-foot { gap: 4px 16px; margin-top: 8px; font-size: 12.5px; }
.trial-end[data-fit="compact"] {
  background: linear-gradient(180deg, rgba(5, 4, 22, 0.16) 0%, rgba(5, 4, 22, 0.34) 16%, rgba(5, 4, 22, 0.9) 36%, rgba(5, 4, 22, 0.98) 70%);
}
.trial-end[data-fit="compact"] .trial-end-sheet {
  bottom: 8px;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: calc(100% - 24px);
}
.trial-end[data-fit="compact"] .trial-end-head { padding-right: 130px; }
.trial-end[data-fit="compact"] .trial-end-flight { margin: 0 0 2px; font-size: 12.5px; }
.trial-end[data-fit="compact"] .trial-end-flight span { display: inline; margin-left: 4px; }
.trial-end[data-fit="compact"] .trial-end-title { font-size: 20px; }
.trial-end[data-fit="compact"] .trial-end-lede { display: none; }
.trial-end[data-fit="compact"] .trial-end-leave {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  font-size: 13px;
}
.startup-trial-ended[data-fit="compact"] { padding-top: 0; }
.startup-trial-ended[data-fit="compact"] .startup-ticket-empty-title { font-size: 21px; }
.startup-trial-ended[data-fit="compact"] .startup-ticket-empty-note { margin-top: 2px; font-size: 13.5px; }
.startup-trial-ended[data-fit="compact"] .trial-fares { margin-top: 8px; }

/* A phone held upright on the startup screen: the heading starts below the account keys in the top corner, and
   the tickets stand one above the other. */
@media (max-width: 600px) {
  .startup-ticket-empty.startup-trial-ended { padding-top: 48px; }
}
@container (max-width: 520px) {
  .trial-fares-tickets { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .trial-end,
  .trial-end-sheet,
  .trial-fare-buy { transition: none; }
  .trial-end-sheet,
  .trial-end.open .trial-end-sheet { transform: translate(-50%, 0); }
}