/* Plan tags and the plan notice, "class tag" look: a feature of a higher plan carries a small printed cabin-class
   tag in the flat colour of the boarding pass class band (First: lilac, Economy: green), notched at one end like
   the slip it opens. Pressing it opens an upgrade slip: the plan and the feature, one sentence, and a perforated
   stub that holds the two buttons. Tags show only to passengers whose plan lacks the feature (html[data-airshow-plan]).
   Where words fit (a settings row, a section name, the map layers note, the slip) the tag says FIRST or ECONOMY;
   an icon button has no room for words, so it carries the class colour in its own corner instead. */
:root {
  --plan-ink: #17182d;
  --plan-first: #c2b4ff;
  --plan-economy: #d6f1c8;
  /* The same two colours, one step deeper, for the small corner of an icon button (it must read on a light bar). */
  --plan-first-mark: #9a85ff;
  --plan-economy-mark: #84cc6e;
}

/* --- The tag ------------------------------------------------------------------------------------------- */
/* A flat class colour with a ticket notch in its left end. Drawn on the tag itself (not on a layer behind it),
   so it scrolls and stacks like the words beside it and never rises over a sticky header. */
.plan-tag {
  --tag-fill: var(--plan-first);
  display: none;
  flex: 0 0 auto;
  align-items: center;
  box-sizing: border-box;
  height: 15px;
  padding: 0 4px 0 7px;
  border-radius: 1.5px 2px 2px 1.5px;
  background: var(--tag-fill);
  color: var(--plan-ink);
  font: 700 10px/1 var(--airshow-ui-font-family, "Pretendard Variable", sans-serif);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  -webkit-mask: radial-gradient(circle 3px at 0 50%, transparent 94%, #000 106%);
          mask: radial-gradient(circle 3px at 0 50%, transparent 94%, #000 106%);
}
.plan-tag[data-tier="economy"] { --tag-fill: var(--plan-economy); }
.plan-tag-text { font-weight: inherit; }

/* Only for passengers whose plan does not include the feature. First and active trials see none. */
html[data-airshow-plan="economy"] .plan-tag[data-tier="first"],
html[data-airshow-plan="free"] .plan-tag { display: inline-flex; }

/* After a settings label; when the row is too narrow for both, the tag moves under the words, aligned with
   them, instead of breaking them. */
.topbar-settings-label:has(> .plan-tag) { flex-wrap: wrap; row-gap: 3px; }
.topbar-settings-label > .plan-tag--inline { margin-left: 2px; }

/* After a section or group name: one tag for a card whose rows all belong to the same plan. */
#topbar-settings-popup .topbar-settings-sublabel:has(> .plan-tag) { display: flex; align-items: center; gap: 8px; }
#topbar-settings-popup .topbar-settings-subhead > .plan-tag--heading { margin-left: -1px; }

/* --- On an icon button: the class colour in its top-right corner ------------------------------------------- */
/* The corner follows the button's own shape (a rounded square, or a sliver of a round key). No words, so nothing
   hangs outside the button or covers its icon; on a mouse, the button's name label adds the class name. */
.plan-tag--mark {
  --mark-fill: var(--plan-first-mark);
  --mark-size: 12px;
  position: absolute;
  inset: 0;
  height: auto;
  padding: 0;
  border-radius: inherit;
  background: none;
  -webkit-mask: none;
          mask: none;
}
.plan-tag--mark[data-tier="economy"] { --mark-fill: var(--plan-economy-mark); }
.plan-tag--mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mark-fill);
  clip-path: polygon(calc(100% - var(--mark-size)) 0, 100% 0, 100% var(--mark-size));
}
.plan-tag--mark > .plan-tag-text { display: none; }
/* Keys with a 1px outline: the corner covers the outline too, so it meets the button's edge. */
.topbar-settings-plan-btn > .plan-tag--mark,
.map-layers-btn > .plan-tag--mark,
.explore-filter-btn > .plan-tag--mark { inset: -1px; }
.topbar-settings-plan-btn > .plan-tag--mark,
.explore-filter-btn > .plan-tag--mark { --mark-size: 14px; }
.topbar-settings-presets-btn { position: relative; }
html.airshow-mobile-runtime #topbar .plan-tag--mark { --mark-size: 10px; }
@media (pointer: coarse) and (max-width: 980px), (hover: none) and (max-width: 980px), (any-hover: none) and (max-width: 980px), (max-width: 980px) and (max-height: 700px) {
  #topbar .plan-tag--mark { --mark-size: 10px; }
}

/* Top bar, with a mouse: the button's name label gains a second line with the class name in its colour. */
html[data-airshow-plan="economy"] #topbar .follow-btn[data-plan-tier="first"]::after,
html[data-airshow-plan="free"] #topbar .follow-btn[data-plan-tier]::after { padding-bottom: 19px; }
#topbar .follow-btn > .plan-tag--mark > .plan-tag-text {
  display: block;
  position: absolute;
  left: 50%;
  top: calc(100% + 28px);
  z-index: 51;
  color: var(--plan-first);
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -2px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}
#topbar .follow-btn > .plan-tag--mark[data-tier="economy"] > .plan-tag-text { color: var(--plan-economy); }
#topbar .follow-btn:hover > .plan-tag--mark > .plan-tag-text,
#topbar .follow-btn:focus-visible > .plan-tag--mark > .plan-tag-text {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
body.ui-vertical-flip #topbar .follow-btn > .plan-tag--mark > .plan-tag-text {
  top: auto;
  bottom: calc(100% + 16px);
  transform: translate(-50%, 2px);
}
body.ui-vertical-flip #topbar .follow-btn:hover > .plan-tag--mark > .plan-tag-text,
body.ui-vertical-flip #topbar .follow-btn:focus-visible > .plan-tag--mark > .plan-tag-text { transform: translate(-50%, 0); }
@media (hover: none) {
  #topbar .follow-btn:hover:not(:focus-visible) > .plan-tag--mark > .plan-tag-text {
    opacity: 0;
    visibility: hidden;
  }
}

/* Map layers panel: one tag on the note instead of a badge on every switch. */
.map-layers-panel .mlp-note {
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(242, 245, 248, 0.86);
  letter-spacing: 0.04em;
  text-transform: none;
}
.map-layers-panel.is-locked .mlp-note { display: flex; }
.map-layers-panel:not(.is-locked) .plan-tag { display: none !important; }

/* --- The notice: an upgrade slip --------------------------------------------------------------------------- */
.tier-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 1329; /* the place of the former upgrade dialog: above the seat view (1325), below a broadcast (1330) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(4, 6, 14, 0);
  transition: background-color 0.2s ease;
}
.tier-notice-overlay[hidden] { display: none; }
.tier-notice-overlay.open { background: rgba(4, 6, 14, 0.5); }

.tier-slip {
  --slip-paper: #f8f6f1;
  --slip-ink: var(--plan-ink);
  --slip-muted: #5f6072;
  --slip-rule: rgba(23, 24, 45, 0.28);
  --slip-band: var(--plan-first);
  --notch: 7px;
  width: min(452px, 100%);
  font-family: var(--airshow-ui-font-family, "Pretendard Variable", sans-serif);
  color: var(--slip-ink);
  opacity: 0;
  transform: translateY(10px);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.tier-notice-overlay.open .tier-slip {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tier-slip[data-tier="economy"] { --slip-band: var(--plan-economy); }

/* The slip: a class band along the top, a perforation with two notches above the stub. */
.tier-slip-paper {
  --stub-top: calc(100% - var(--stub-h, 62px));
  position: relative;
  border-radius: 8px;
  background: linear-gradient(var(--slip-band), var(--slip-band)) top / 100% 5px no-repeat, var(--slip-paper);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 var(--stub-top), transparent 96%, #000 104%) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--stub-top), transparent 96%, #000 104%) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at 0 var(--stub-top), transparent 96%, #000 104%) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% var(--stub-top), transparent 96%, #000 104%) right / 51% 100% no-repeat;
}

.tier-slip-body {
  padding: 22px 24px 20px;
  word-break: keep-all; /* Korean wraps between words */
}
.tier-slip-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--slip-muted);
}
.tier-slip .plan-tag { display: inline-flex; }
.tier-slip-feature {
  margin: 0;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}
.tier-slip-line {
  margin: 7px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #3b3d52;
}

/* The stub: the plan in hand on the left, the two buttons on the right. */
.tier-slip-stub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  height: var(--stub-h, 62px);
  padding: 0 16px 0 24px;
}
.tier-slip-stub::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--notch) + 6px);
  right: calc(var(--notch) + 6px);
  border-top: 1.5px dashed var(--slip-rule);
}
.tier-slip-plan {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--slip-muted);
}
.tier-slip-plan b { font-weight: 700; color: var(--slip-ink); margin-left: 4px; }
.tier-slip-btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tier-slip-btn-primary {
  border: 0;
  background: #1d0d78;
  color: #fff;
}
.tier-slip-btn-primary:hover,
.tier-slip-btn-primary:focus-visible { background: #2d1ba8; }
.tier-slip-btn-quiet {
  border: 1px solid var(--slip-rule);
  background: transparent;
  color: var(--slip-ink);
}
.tier-slip-btn-quiet:hover,
.tier-slip-btn-quiet:focus-visible { background: rgba(23, 24, 45, 0.06); border-color: rgba(23, 24, 45, 0.45); }
.tier-slip-btn:focus-visible { outline: 2px solid #004aad; outline-offset: 2px; }

/* Phone in landscape: the same slip, a little tighter. */
html.airshow-mobile-runtime .tier-slip { width: min(440px, 100%); }
html.airshow-mobile-runtime .tier-slip-paper { --stub-h: 56px; }
html.airshow-mobile-runtime .tier-slip-body { padding: 18px 20px 16px; }
html.airshow-mobile-runtime .tier-slip-feature { font-size: 20px; }
html.airshow-mobile-runtime .tier-slip-line { font-size: 13.5px; line-height: 1.4; }
html.airshow-mobile-runtime .tier-slip-stub { padding: 0 14px 0 20px; }
html.airshow-mobile-runtime .tier-slip-btn { height: 34px; padding: 0 14px; }

/* Narrow portrait screens: the plan line takes its own row in the stub. */
@media (max-width: 400px) {
  .tier-slip-paper { --stub-h: 96px; }
  .tier-slip-stub { flex-wrap: wrap; align-content: center; row-gap: 8px; }
  .tier-slip-plan { flex-basis: 100%; }
  .tier-slip-btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tier-notice-overlay,
  .tier-slip,
  .tier-notice-overlay.open .tier-slip,
  #topbar .follow-btn > .plan-tag--mark > .plan-tag-text,
  .tier-slip-btn { transition: none; }
  .tier-slip { transform: none; }
}