@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 brand values below are PLACEHOLDERS until Formula E's guidelines arrive. 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 {
  /* PLACEHOLDER - Formula E's primary brand colour. Carries white text, so keep it at 4.5:1 or better
     against #fff when the real value goes in. */
  --fe-brand: #0057b8;
  --fe-brand-hover: #00418a;
  /* PLACEHOLDER - accent for highlights and the step in progress. Only ever used as a fill behind the
     dark ink below, never as text on white. */
  --fe-accent: #3ee3ff;
  /* PLACEHOLDER - the dark surfaces: header, tab bar and footer. */
  --fe-dark: #0a1024;
  --fe-dark-band: #141b33;
  --fe-ink-on-dark: #f4f6fb;
  --fe-ink-on-dark-muted: rgba(244, 246, 251, 0.72);
  --fe-ink: #0a1024;
  --fe-ink-muted: #6b7180;
  --fe-line: rgba(10, 16, 36, 0.12);
  /* The call to action - add to basket, checkout, pay. Kept separate from --fe-brand so a brand that
     turns out to be a pale 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. Point these at Formula E's licensed faces and load them through the
     front's external resources; 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. */
  /* 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);
}
.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 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;
}
.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;
}
.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(244, 246, 251, 0.12);
}
.fe-footer__logo {
  max-height: 56px;
  width: 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);
  padding: 1rem 0;
  font-size: 0.85rem;
}