@charset "UTF-8";
/* Formula E ticket shop.

   An OVERRIDE sheet, not a theme. The front loads msv-2024.css first and this after it, so the shop,
   basket and checkout keep every rule they already have and only the brand changes. It is not a fork of
   msv-2024.scss because that source no longer builds the CSS that is deployed: the committed
   msv-2024.css carries hand-appended sections and comes out ~50 KB larger than a fresh compile, so a
   theme built from the source would silently lose styling the checkout depends on.

   Every rule is scoped to .fe-shop, the class the _2026_FE layout puts on its shell. That buys one
   class of specificity over msv-2024, so nothing here needs !important, and it means the sheet does
   nothing on a page that is not in that layout.

   The colours are Formula E's, from their 2026 brand guidelines (section 5, Colour). Change the
   tokens, not the rules: every colour and font in this file reads from them. Built by
   tools/styles/Build-Css.ps1 -Stylesheet FormulaE. */
:root {
  /* Surge Purple, Formula E's primary. Bright White on it is an approved pairing, and 6.8:1. */
  --fe-brand: #6234e0;
  /* Not in the palette - a state, not a colour: Surge Purple taken 20% towards Tarmac Black. */
  --fe-brand-hover: #522eba;
  /* Electric Lime, one of the two accents. Only ever a fill behind the dark ink below, or a hover on
     a dark surface - never text on white, where it all but disappears. The other accent, Signal
     Orange, is left out: the guidelines warn against too many combinations in one asset. */
  --fe-accent: #cdff5d;
  /* Tarmac Black, the brand's only dark. The guidelines have no second dark for a band beneath it, so
     the footer's seller band is the same colour and set off by a rule instead (see .fe-footer). */
  --fe-dark: #101820;
  --fe-dark-band: #101820;
  /* Bright White and Light Grey - Light Grey is 9:1 on Tarmac Black. */
  --fe-ink-on-dark: #fff;
  --fe-ink-on-dark-muted: #bababa;
  --fe-ink: #101820;
  /* Track Grey. Only 4:1 on white, under the 4.5:1 small text needs, so it is kept to the step bar's
     chevrons and disabled steps - disabled text is exempt. Do not use it for copy. */
  --fe-ink-muted: #7e7e7e;
  --fe-line: rgba(16, 24, 32, 0.12);
  /* The call to action - add to basket, checkout, pay. Kept separate from --fe-brand so a change to
     the brand colour does not take the most important button with it. */
  --fe-cta: var(--fe-brand);
  --fe-cta-hover: var(--fe-brand-hover);
  /* PLACEHOLDER - web fonts. Formula E's face is FE Surge, not yet supplied for the web; point these
     at it and load it through the front's external resources when it is. Until then they fall back
     to the MSV shop's own. */
  --fe-heading-font: "Rubik", sans-serif;
  --fe-body-font: "Rubik", sans-serif;
}

.fe-shop {
  font-family: var(--fe-body-font);
  /* Page content only: each layout's header and footer set their own link colours. */
  /* Buttons. msv-2024 paints .button sky blue and .success green; both become the brand here. */
  /* The second choice in a dialog - "I have/do not require admission tickets" - and anywhere else a
     page offers a lesser action beside a main one. Outlined, so only one button reads as the action. */
  /* Header. The _2025 header floats over the hero on a fade to transparent, so it keeps the fade and
     only changes its colour - a solid band was tried and hid the top 86px of every hero image. */
  /* Event header on a journey page: the title, the event logo box and the step bar. msv-2024 sets
     the breadcrumb bar through ".shop-container-oldstyle > .body > main", so this has to match it. */
  /* msv-2024 forces the event logo to solid white for its red box. Formula E artwork is shown as
     supplied - supply a version that reads on --fe-dark. */
  /* The journey's right-hand column - basket, its step button and the side card - sticks as one.
     msv-2024 makes .basket-container alone sticky at top: 60px, which suited the old shop's slim header:
     under the msvshop header (about 130px, itself sticky) the basket's top hid behind it, and the side
     card below it scrolled up underneath the stuck basket and its button. The column is about 750px, so
     it only sticks on windows tall enough to show all of it; shorter ones scroll it with the page. */
  /* The journey's optional side card under the basket (CheckoutJourney.SideCard*): a grandstand map
     and a link to the grandstand guide on the Formula E journey. */
  /* Basket, product and modal title bands. Dark rather than the brand colour: the buttons beneath a
     ticket group's band are brand-filled, and in the same colour the two ran together. Brand stays
     the colour of things you can press. */
  /* Date pickers on a product - the retail calendar and the event calendar. */
}
.fe-shop h1, .fe-shop h2, .fe-shop h3, .fe-shop h4, .fe-shop h5, .fe-shop h6 {
  font-family: var(--fe-heading-font);
}
.fe-shop main a {
  color: var(--fe-brand);
}
.fe-shop .button,
.fe-shop .button.primary,
.fe-shop button.primary {
  background-color: var(--fe-brand);
  color: #fff;
}
.fe-shop .button:hover, .fe-shop .button:focus,
.fe-shop .button.primary:hover,
.fe-shop .button.primary:focus,
.fe-shop button.primary:hover,
.fe-shop button.primary:focus {
  background-color: var(--fe-brand-hover);
  color: #fff;
}
.fe-shop .button.success,
.fe-shop .button.primary.success,
.fe-shop button.success {
  background-color: var(--fe-cta);
  color: #fff;
}
.fe-shop .button.success:hover, .fe-shop .button.success:focus,
.fe-shop .button.primary.success:hover,
.fe-shop .button.primary.success:focus,
.fe-shop button.success:hover,
.fe-shop button.success:focus {
  background-color: var(--fe-cta-hover);
  color: #fff;
}
.fe-shop .button.secondary {
  background-color: #fff;
  border: 2px solid var(--fe-brand);
  color: var(--fe-brand);
}
.fe-shop .button.secondary:hover, .fe-shop .button.secondary:focus {
  background-color: #fff;
  border-color: var(--fe-brand-hover);
  color: var(--fe-brand-hover);
}
.fe-shop .button.hollow,
.fe-shop .button.alert {
  background-color: transparent;
  border: 2px solid var(--fe-brand);
  color: var(--fe-brand);
}
.fe-shop.shop-container-oldstyle > .header header {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--fe-dark) 90%, transparent), color-mix(in srgb, var(--fe-dark) 75%, transparent) 40%, transparent);
  /* The phone menu button and its panel title. These come from msv-2021.css, which the shop
     loads alongside msv-2024, in that sheet's own red (#ec1d23). */
}
.fe-shop.shop-container-oldstyle > .header header nav .menu-on-screen li a,
.fe-shop.shop-container-oldstyle > .header header nav .container > a,
.fe-shop.shop-container-oldstyle > .header header nav .icon i,
.fe-shop.shop-container-oldstyle > .header header nav .icon span {
  color: var(--fe-ink-on-dark);
}
.fe-shop.shop-container-oldstyle > .header header nav .menu-on-screen li a:hover,
.fe-shop.shop-container-oldstyle > .header header nav .menu-on-screen li i:hover,
.fe-shop.shop-container-oldstyle > .header header nav .icon i:hover,
.fe-shop.shop-container-oldstyle > .header header nav .icon span:hover,
.fe-shop.shop-container-oldstyle > .header header nav .container > a:hover {
  color: var(--fe-accent);
  border-color: var(--fe-accent);
}
.fe-shop.shop-container-oldstyle > .header header .sub-menu .widget-header .grid-x {
  border-bottom-color: var(--fe-brand);
}
.fe-shop.shop-container-oldstyle > .header header .sub-menu .widget-header .logo,
.fe-shop.shop-container-oldstyle > .header header .sub-menu ul li a:hover {
  color: var(--fe-brand);
}
.fe-shop.shop-container-oldstyle > .header header nav .menu,
.fe-shop.shop-container-oldstyle > .header header .sub-menu .mobile-title {
  background-color: var(--fe-brand);
}
.fe-shop.shop-container-oldstyle > .header header .menu-a:hover,
.fe-shop.shop-container-oldstyle > .header header .menu-a:hover i,
.fe-shop.shop-container-oldstyle > .header header .menu-a:hover span {
  color: var(--fe-accent);
}
.fe-shop.shop-container-oldstyle > .header header .menu-a:hover .menu-icon span {
  background-color: var(--fe-accent);
}
.fe-shop .breadcrumbs-container, .fe-shop.shop-container-oldstyle > .body > main .breadcrumbs-container {
  background-color: var(--fe-dark-band);
  border-top-color: var(--fe-brand);
}
.fe-shop .breadcrumbs a {
  color: var(--fe-ink-on-dark);
}
.fe-shop .page-title h1 em {
  color: var(--fe-brand);
}
.fe-shop .page-title .icon-container .icon {
  background-color: var(--fe-dark);
}
.fe-shop .page-title .icon-container .icon img {
  filter: none;
}
.fe-shop .tab-bar {
  background-color: var(--fe-dark);
}
.fe-shop .tab-bar a.item {
  color: var(--fe-ink-on-dark-muted);
}
.fe-shop .tab-bar a.item.selected {
  background-color: var(--fe-accent);
  color: var(--fe-ink);
}
@media print, screen and (min-width: 64em) {
  .fe-shop .shop-journey .basket-container {
    position: static;
  }
}
@media screen and (min-width: 64em) and (min-height: 900px) {
  .fe-shop .shop-journey .grid-x.grid-padding-x > .cell.large-5 {
    position: sticky;
    top: 150px;
    align-self: flex-start;
  }
}
.fe-shop .journey-side-card {
  margin-top: 28px;
  border: 1px solid var(--fe-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.fe-shop .journey-side-card img {
  display: block;
  width: 100%;
  height: auto;
}
.fe-shop .journey-side-card__body {
  padding: 16px 18px;
}
.fe-shop .journey-side-card__body h4 {
  margin: 0 0 6px;
  font-family: var(--fe-heading-font);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--fe-ink);
}
.fe-shop .journey-side-card__body p {
  margin: 0 0 10px;
}
.fe-shop .journey-side-card__body a {
  font-weight: 600;
}
.fe-shop .container-v1 .title,
.fe-shop .modal-v2-container .modal-v2 .title,
.fe-shop .standard-product-view .title,
.fe-shop .recommended-product .title,
.fe-shop .vehicle .title {
  background-color: var(--fe-dark);
}
.fe-shop .basket .title i,
.fe-shop .basket .expiry-timer em,
.fe-shop section > h2 i,
.fe-shop .collection-wrapper .filters h4 {
  color: var(--fe-brand);
}
.fe-shop .collection-wrapper .filters input.range {
  accent-color: var(--fe-brand);
}
.fe-shop .product-wrapper .product-info .product-basket-controls .product-basket-button a.button {
  background: var(--fe-cta);
}
.fe-shop .product-wrapper .product-info .product-attribute .button,
.fe-shop .product-wrapper .product-info .product-attribute-size .button {
  background-color: #fff;
  color: var(--fe-ink);
}
.fe-shop .product-wrapper .product-info .product-attribute .button:hover,
.fe-shop .product-wrapper .product-info .product-attribute-size .button:hover {
  color: var(--fe-brand);
  border-color: var(--fe-brand);
}
.fe-shop .product-wrapper .product-info .product-attribute .button.selected, .fe-shop .product-wrapper .product-info .product-attribute .button:active,
.fe-shop .product-wrapper .product-info .product-attribute-size .button.selected,
.fe-shop .product-wrapper .product-info .product-attribute-size .button:active {
  background: var(--fe-brand);
  border-color: var(--fe-brand);
  color: #fff;
}
.fe-shop .calendar-container .calendar-header,
.fe-shop .calendar-container .event-info .headline-logo,
.fe-shop .calendar-container .calendar-monthly-container .info.full,
.fe-shop .calendar-container .calendar-monthly-container.full .calendar-day .day.has-events,
.fe-shop .calendar-container .options .button.selected,
.fe-shop .calendar-container .calendar-filter .button.selected,
.fe-shop .pagination li {
  background-color: var(--fe-brand);
}
.fe-shop .calendar-container .options .button,
.fe-shop .calendar-container .calendar-filter .button {
  border-color: var(--fe-brand);
}
.fe-shop .retail-calendar .group-selector .button > span.sold-out {
  background-color: var(--fe-dark);
}

/* The msvshop-based ticket layout (CMS.Module.Merchandise/Layout/_FormulaE2026). That front loads
   msv-2024.css inside a cascade layer and merchandise-2026.css unlayered, so the msvshop theme wins
   wherever the two disagree - which is right for the header, basket and footer, and wrong in the few
   places below where the msvshop theme's generic rules reach into the ticket widgets. */
.fe-tickets {
  /* Footer at the foot of the window when a page is short - a basket or a placeholder page otherwise
     left the footer half way up the screen with white below it. merchandise-2026 already makes the
     shell at least the window's height; as a column with the page area taking the slack, the band and
     footer sit at the bottom instead of the spare height collecting beneath them. The basket panel and
     overlays among the shell's children are fixed-position, so the column does not move them. */
  /* merchandise-2026 rebuilds .grid-x as a 12-column CSS grid that knows only a handful of span
     classes. The journey, checkout and footer markup is written for Foundation's flex grid, whose
     cell widths msv-2024 still supplies from its layer once the container is flex again. */
  /* msv-2024 paints a dark fade behind every "header nav", for the old shop header that sits over a
     hero. The msvshop header is a white bar, and its menu has no background of its own to win. */
  /* The msvshop theme's MSV red, in the places it draws it around the ticket pages. */
  /* The wrapper keeps its 40px of bottom padding from the msvshop theme, but in the Formula E footer's
     bottom band rather than near-black, so it reads as the end of the footer and not a stray strip. */
  /* merchandise-2026 gives every .button a 2px black border, which suits its black buttons and not
     brand-filled ones. The hollow and alert variants keep the brand outline set above. */
  /* The venue logo box beside a journey's title, from the CheckoutJourney widget's LogoImageUrl. The
     widget is shared with tickets.msv.com, where the circuit's mark is right; on Formula E's pages it
     would put MSV venue branding next to theirs, so it is hidden here whatever the editor fills in. */
  /* The title block was spaced around that logo box: msv-2024 puts 50px above the title, and the
     msvshop theme adds its generic h1 margin (0.67em - 37px at this size) above and below it. */
  /* The event title over the journey's hero banner. The banner (.hero-image) and the title block are
     siblings in main.shop-journey, so this is layout, not markup: the journey becomes a one-column grid
     and the title's container shares the banner's row, sitting at its foot over the banner's own
     (otherwise unused) .overlay, which becomes a dark fade so white text holds on any photo. The
     breadcrumbs drop to the row beneath; everything after keeps its order.
     Only with a banner (:has), so a journey without one is laid out as before, and only from tablet up:
     the phone banner is 240px tall, too short for the title, which stays below it there. */
  /* The journey's step bar. msv-2024's is a full-bleed band of 1rem bold capitals in 20px of padding,
     which outweighs everything under the msvshop header. Here it is a slim white bar: the current step
     underlined, the ones behind it in the brand colour, the ones ahead greyed out (the journey marks
     those "disabled"), with a chevron between each. Markup unchanged - only the theme's .tab-bar. */
  /* The ticket pages bring their own breadcrumb row. Light, to sit under the white msvshop header the
     way the merchandise layout's own row does, rather than as the old shop's dark band. */
}
.fe-tickets.merch-shell {
  display: flex;
  flex-direction: column;
}
.fe-tickets.merch-shell > .merch-main {
  flex: 1 0 auto;
}
.fe-tickets .page-slot .grid-x,
.fe-tickets .modal-v2-container .grid-x,
.fe-tickets .fe-footer .grid-x {
  display: flex;
  flex-flow: row wrap;
  /* The CSS grid's 10px gap carries over to flex and pushes a 75% + 25% row onto two lines. */
  gap: 0;
}
.fe-tickets .merch-header nav {
  background: none;
}
.fe-tickets .merch-header .basket-button {
  background: var(--fe-cta);
  border-color: var(--fe-cta);
  color: #fff;
}
.fe-tickets.merch-shell .site-footer-shell {
  border-top-color: var(--fe-brand);
  background: var(--fe-dark-band);
}
.fe-tickets .basket-side-menu .basket.pop-up .title i,
.fe-tickets .basket-side-menu .basket.pop-up .body .item-header a:hover,
.fe-tickets .basket-side-menu .basket.pop-up .body .item-header a:focus-visible {
  color: var(--fe-brand);
}
.fe-tickets .basket-side-menu .basket.pop-up .expiry-timer {
  border-left-color: var(--fe-brand);
}
.fe-tickets .basket-side-menu .basket.pop-up .footer .button {
  background: var(--fe-cta);
  border-color: var(--fe-cta);
}
.fe-tickets .page-slot .button:not(.hollow):not(.alert):not(.secondary),
.fe-tickets .modal-v2-container .button:not(.hollow):not(.alert):not(.secondary) {
  border-color: transparent;
}
.fe-tickets .page-title .icon-container {
  display: none;
}
.fe-tickets .page-title {
  padding-bottom: 24px;
}
.fe-tickets .page-title h1 {
  margin: 0;
  padding: 28px 0 10px;
  line-height: 1.05;
}
.fe-tickets .page-title h3 {
  line-height: 1.25;
}
@media print, screen and (min-width: 40em) {
  .fe-tickets .shop-journey:has(> .hero-image) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .fe-tickets .shop-journey:has(> .hero-image) > * {
    grid-column: 1;
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .hero-image {
    grid-row: 1;
    position: relative;
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .hero-image img {
    min-height: 340px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .hero-image .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(16, 24, 32, 0.88) 0%, rgba(16, 24, 32, 0.35) 45%, rgba(16, 24, 32, 0) 75%);
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .grid-container:has(> .page-title) {
    grid-row: 1;
    align-self: end;
    width: 100%;
    position: relative;
    z-index: 1;
    /* Clear of the banner's bottom border. */
    margin-bottom: 10px;
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .grid-container:has(> .page-title) .page-title {
    padding-bottom: 24px;
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .grid-container:has(> .page-title) .page-title h1 {
    padding-top: 0;
    color: #fff;
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .grid-container:has(> .page-title) .page-title h1 em {
    color: #fff;
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .grid-container:has(> .page-title) .page-title h3,
  .fe-tickets .shop-journey:has(> .hero-image) > .grid-container:has(> .page-title) .page-title h3 em {
    color: var(--fe-ink-on-dark);
  }
  .fe-tickets .shop-journey:has(> .hero-image) > .breadcrumbs-container {
    grid-row: 2;
    padding-bottom: 8px;
  }
}
.fe-tickets .tab-bar {
  background: #fff;
  /* Bottom only: it is the line the current step's underline sits on. The title area above is
     already white, so a top border just boxed the bar in. */
  border-bottom: 1px solid var(--fe-line);
  margin-bottom: 28px;
  /* msv-2024 makes the bar a grid and centres the steps in a 100rem column, wider than this page,
     so they started at the window edge. Here they sit in the same column as .grid-container, with
     its padding at each breakpoint, and stay on one line - scrolling sideways on a phone rather
     than wrapping the last step onto a second row. */
  display: block;
}
.fe-tickets .tab-bar > .grid-x {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 0.625rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
@media print, screen and (max-width: 64em) {
  .fe-tickets .tab-bar > .grid-x {
    padding: 0 1.25rem;
  }
}
@media print, screen and (max-width: 39.9375em) {
  .fe-tickets .tab-bar > .grid-x {
    padding: 0 1rem;
  }
}
.fe-tickets .tab-bar .grid-x > .cell:first-child a.item {
  padding-left: 0;
}
.fe-tickets .tab-bar .grid-x > .cell {
  display: flex;
  align-items: center;
}
.fe-tickets .tab-bar .grid-x > .cell:not(:last-child)::after {
  content: "›";
  padding: 0 2px;
  color: var(--fe-ink-muted);
  font-size: 1.1rem;
  line-height: 1;
}
.fe-tickets .tab-bar a.item {
  padding: 15px 12px 12px;
  border-bottom: 3px solid transparent;
  color: var(--fe-brand);
}
.fe-tickets .tab-bar a.item h3 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.fe-tickets .tab-bar a.item:hover {
  color: var(--fe-brand-hover);
}
.fe-tickets .tab-bar a.item.selected {
  background: transparent;
  border-bottom-color: var(--fe-brand);
  color: var(--fe-ink);
}
.fe-tickets .tab-bar a.item.disabled,
.fe-tickets .tab-bar a.item.disabled:hover {
  color: var(--fe-ink-muted);
}
@media print, screen and (max-width: 39.9375em) {
  .fe-tickets .tab-bar a.item {
    padding: 12px 8px 9px;
  }
}
.fe-tickets .page-slot .breadcrumbs-container {
  background: transparent;
  padding-top: 16px;
  padding-bottom: 0;
}
.fe-tickets .page-slot .breadcrumbs-container .breadcrumbs {
  margin-bottom: 0;
}
.fe-tickets .page-slot .breadcrumbs-container .breadcrumbs li,
.fe-tickets .page-slot .breadcrumbs-container .breadcrumbs a {
  color: var(--fe-ink);
}

/* The footer, from Layouts/FormulaE/_Footer.razor. */
.fe-footer {
  background: var(--fe-dark);
  color: var(--fe-ink-on-dark-muted);
  padding-top: 2.5rem;
  /* Formula E's Championship lockup. 420px is the guidelines' digital minimum (3.15); on a phone
     narrower than that it shrinks to the column - the stacked lockup meant for small spaces was not
     supplied. Its clear space as an outside user is half its height, 21px: the footer's 40px above,
     the 24px under .fe-footer__brand and the cell gutter beside it all exceed that. */
}
.fe-footer a {
  color: var(--fe-ink-on-dark);
}
.fe-footer a:hover {
  color: var(--fe-accent);
}
.fe-footer__brand {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fe-footer__logo {
  display: block;
  width: 420px;
  max-width: 100%;
  height: auto;
}
.fe-footer__socials a {
  display: inline-block;
  margin-left: 1rem;
  font-size: 1.4rem;
}
.fe-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 1.5rem 0 2rem;
  font-size: 0.9rem;
}
.fe-footer__seller {
  background: var(--fe-dark-band);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1rem 0;
  font-size: 0.85rem;
}