/* Matchday Hotels V9.0.1 — Formatting Repair
   Scope: presentation/contrast/layout only.
   Loaded after supporter-flow-v9.css.

   Visual contract:
   - dark surface => explicit light text
   - light surface => explicit dark text
   - no inherited text colour is allowed to make content unreadable
*/

/* ================================================================
   1. FIXTURE HERO — stable width and explicit grid placement
   ================================================================ */

.mhd-v9-fixture-page,
.mhd-v9-fixture-hero {
  width: 100% !important;
  max-width: none !important;
}

.mhd-v9-fixture-hero {
  margin: 0 !important;
  box-sizing: border-box !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(360px, 480px) !important;
  gap: clamp(26px, 3.6vw, 58px) !important;
  padding:
    clamp(84px, 8vw, 124px)
    clamp(28px, 5vw, 78px)
    clamp(38px, 4vw, 62px) !important;
  min-height: clamp(620px, 72vh, 790px) !important;
}

.mhd-v9-fixture-hero > .seo-v74-fixture-lockup {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 850px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: stretch !important;
  align-self: end !important;
  overflow: visible !important;
}

.mhd-v9-fixture-hero > .mhd-v9-quick-builder {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 480px !important;
  margin: 0 !important;
  justify-self: end !important;
  align-self: end !important;
}

.mhd-v9-fixture-hero .seo-v74-fixture-lockup h1 {
  width: auto !important;
  max-width: 13.5ch !important;
  margin: 22px 0 18px !important;
  font-size: clamp(2.8rem, 4.8vw, 5.8rem) !important;
  line-height: .94 !important;
  letter-spacing: -.05em !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance;
  color: #ffffff !important;
}

.mhd-v9-fixture-hero .seo-v74-fixture-lockup,
.mhd-v9-fixture-hero .seo-v74-fixture-lockup p,
.mhd-v9-fixture-hero .seo-v74-fixture-lockup strong,
.mhd-v9-fixture-hero .seo-v74-fixture-lockup small,
.mhd-v9-fixture-hero .seo-v74-fixture-lockup a,
.mhd-v9-fixture-hero .seo-v74-badge-row,
.mhd-v9-fixture-hero .seo-v74-badge-row > span {
  color: #ffffff !important;
}

.mhd-v9-fixture-hero .seo-v74-fixture-lockup small {
  color: rgba(255, 255, 255, .76) !important;
}

.mhd-v9-fixture-hero .seo-v75-fixture-phrase {
  max-width: 82% !important;
  opacity: 1 !important;
  color: rgba(255, 255, 255, .105) !important;
}

/*
  V9.0 stacked the hero at 980px.
  That was too aggressive and produced the broken desktop-like screenshot.
  Keep the two-column composition down to 861px.
*/
@media (min-width: 861px) and (max-width: 1180px) {
  .mhd-v9-fixture-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(330px, 410px) !important;
    gap: 28px !important;
    padding:
      78px
      30px
      38px !important;
  }

  .mhd-v9-fixture-hero > .mhd-v9-quick-builder {
    max-width: 410px !important;
  }

  .mhd-v9-fixture-hero .seo-v74-fixture-lockup h1 {
    max-width: 14ch !important;
    font-size: clamp(2.6rem, 5.2vw, 4.8rem) !important;
  }
}

@media (max-width: 860px) {
  .mhd-v9-fixture-hero {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    min-height: auto !important;
    padding:
      82px
      18px
      30px !important;
  }

  .mhd-v9-fixture-hero > .seo-v74-fixture-lockup,
  .mhd-v9-fixture-hero > .mhd-v9-quick-builder {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .mhd-v9-fixture-hero > .seo-v74-fixture-lockup {
    grid-row: 1 !important;
  }

  .mhd-v9-fixture-hero > .mhd-v9-quick-builder {
    grid-row: 2 !important;
  }

  .mhd-v9-fixture-hero .seo-v74-fixture-lockup h1 {
    max-width: 16ch !important;
    font-size: clamp(2.65rem, 10.5vw, 4.7rem) !important;
  }
}


/* ================================================================
   2. QUICK BUILDER — explicit dark-surface text contract
   ================================================================ */

.mhd-v9-quick-builder,
.mhd-v9-quick-builder h1,
.mhd-v9-quick-builder h2,
.mhd-v9-quick-builder h3,
.mhd-v9-quick-builder strong,
.mhd-v9-quick-builder label {
  color: #ffffff !important;
}

.mhd-v9-quick-builder p,
.mhd-v9-quick-builder small {
  color: rgba(255, 255, 255, .72) !important;
}

.mhd-v9-quick-builder .eyebrow,
.mhd-v9-quick-builder a {
  color: #ff7a38 !important;
}

.mhd-v9-quick-builder .mhd-v9-party-button,
.mhd-v9-quick-builder .mhd-v9-party-button strong,
.mhd-v9-quick-builder .mhd-v9-room-stepper,
.mhd-v9-quick-builder .mhd-v9-room-stepper strong {
  color: #ffffff !important;
}


/* ================================================================
   3. MAIN DARK SUPPORTER FLOW — explicit dark-surface contract
   ================================================================ */

.mhd-v9-supporter-flow,
.mhd-v9-supporter-flow > .section-heading,
.mhd-v9-supporter-flow .mhd-away-day-builder-v809,
.mhd-v9-supporter-flow .mhd-v9-supporter-bridge {
  color: #ffffff !important;
}

.mhd-v9-supporter-flow > .section-heading h1,
.mhd-v9-supporter-flow > .section-heading h2,
.mhd-v9-supporter-flow > .section-heading h3,
.mhd-v9-supporter-flow .mhd-v9-supporter-bridge h1,
.mhd-v9-supporter-flow .mhd-v9-supporter-bridge h2,
.mhd-v9-supporter-flow .mhd-v9-supporter-bridge h3,
.mhd-v9-supporter-flow .mhd-away-day-builder-v809 legend,
.mhd-v9-supporter-flow .mhd-away-day-builder-v809 h1,
.mhd-v9-supporter-flow .mhd-away-day-builder-v809 h2,
.mhd-v9-supporter-flow .mhd-away-day-builder-v809 h3 {
  color: #ffffff !important;
}

.mhd-v9-supporter-flow > .section-heading p,
.mhd-v9-supporter-flow .mhd-v9-supporter-bridge p,
.mhd-v9-supporter-flow .mhd-away-day-builder-v809 fieldset > p,
.mhd-v9-supporter-flow .away-day-live-message,
.mhd-v9-supporter-flow [data-away-day-required-message],
.mhd-v9-supporter-flow [data-away-day-status],
.mhd-v9-supporter-flow [data-away-day-stale] {
  color: rgba(255, 255, 255, .74) !important;
}

.mhd-v9-supporter-flow .eyebrow,
.mhd-v9-supporter-flow .mhd-v9-benefits strong,
.mhd-v9-supporter-flow .mhd-v9-benefits article > span {
  color: #ff6b35 !important;
}


/* ================================================================
   4. YOUR PLAN — LIGHT CARD MUST USE DARK TEXT
   ================================================================ */

.mhd-v9-supporter-flow .away-day-summary-v809 {
  color: #111318 !important;
  border: 1px solid #d7dce3 !important;
  background: #ffffff !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .16) !important;
}

.mhd-v9-supporter-flow .away-day-summary-v809 h1,
.mhd-v9-supporter-flow .away-day-summary-v809 h2,
.mhd-v9-supporter-flow .away-day-summary-v809 h3,
.mhd-v9-supporter-flow .away-day-summary-v809 strong,
.mhd-v9-supporter-flow .away-day-summary-v809 li,
.mhd-v9-supporter-flow .away-day-summary-v809 p,
.mhd-v9-supporter-flow .away-day-summary-v809 span:not(.eyebrow) {
  color: #111318 !important;
}

.mhd-v9-supporter-flow .away-day-summary-v809 .eyebrow {
  color: #f04b22 !important;
}

.mhd-v9-supporter-flow .away-day-summary-v809 li {
  border-color: #d6dbe2 !important;
  background: #f7f8fa !important;
}

.mhd-v9-supporter-flow .away-day-summary-actions-v809 .button-secondary,
.mhd-v9-supporter-flow .away-day-summary-actions-v809 .button-ghost {
  color: #111318 !important;
  border-color: #aeb6c1 !important;
  background: #ffffff !important;
}


/* ================================================================
   5. HOTEL CONTROLS/PANELS — keep outer panel dark, inner result
      cards light with explicit dark text
   ================================================================ */

.mhd-v9-supporter-flow .mhd-v77-party-controls {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .045) !important;
}

.mhd-v9-supporter-flow .mhd-v77-party-controls label {
  color: #ffffff !important;
}

.mhd-v9-supporter-flow .mhd-v77-party-controls small {
  color: rgba(255, 255, 255, .72) !important;
}

.mhd-v9-supporter-flow .mhd-v77-party-controls select {
  color: #111318 !important;
  background: #ffffff !important;
}

.mhd-v9-supporter-flow .mhd-v77-hotel-panel {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .035) !important;
}

.mhd-v9-supporter-flow .mhd-v77-hotel-panel-heading h1,
.mhd-v9-supporter-flow .mhd-v77-hotel-panel-heading h2,
.mhd-v9-supporter-flow .mhd-v77-hotel-panel-heading h3,
.mhd-v9-supporter-flow .mhd-v77-hotel-panel-heading strong {
  color: #ffffff !important;
}

.mhd-v9-supporter-flow .mhd-v77-hotel-panel-heading p,
.mhd-v9-supporter-flow .mhd-v77-hotel-panel-heading small {
  color: rgba(255, 255, 255, .72) !important;
}

/* Light hotel-result surfaces. */
.mhd-v9-supporter-flow .mhd-v77-hotel-card,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback,
.mhd-v9-supporter-flow [data-hotel-result],
.mhd-v9-supporter-flow [data-hotel-preview-card],
.mhd-v9-supporter-flow .mhd-supporter-hotel-card-v8081 {
  color: #111318 !important;
}

.mhd-v9-supporter-flow .mhd-v77-hotel-card,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback,
.mhd-v9-supporter-flow [data-hotel-preview-card],
.mhd-v9-supporter-flow .mhd-supporter-hotel-card-v8081 {
  border-color: #d8dde5 !important;
  background: #fbfcfe !important;
}

.mhd-v9-supporter-flow .mhd-v77-hotel-card h1,
.mhd-v9-supporter-flow .mhd-v77-hotel-card h2,
.mhd-v9-supporter-flow .mhd-v77-hotel-card h3,
.mhd-v9-supporter-flow .mhd-v77-hotel-card h4,
.mhd-v9-supporter-flow .mhd-v77-hotel-card strong,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback h1,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback h2,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback h3,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback h4,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback strong,
.mhd-v9-supporter-flow [data-hotel-preview-card] h1,
.mhd-v9-supporter-flow [data-hotel-preview-card] h2,
.mhd-v9-supporter-flow [data-hotel-preview-card] h3,
.mhd-v9-supporter-flow [data-hotel-preview-card] h4,
.mhd-v9-supporter-flow [data-hotel-preview-card] strong {
  color: #111318 !important;
}

.mhd-v9-supporter-flow .mhd-v77-hotel-card p,
.mhd-v9-supporter-flow .mhd-v77-hotel-card small,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback p,
.mhd-v9-supporter-flow .mhd-v77-hotel-fallback small,
.mhd-v9-supporter-flow [data-hotel-preview-card] p,
.mhd-v9-supporter-flow [data-hotel-preview-card] small {
  color: #596273 !important;
}

/* Hotel image labels remain deliberately dark overlays. */
.mhd-v9-supporter-flow .mhd-v77-hotel-card img,
.mhd-v9-supporter-flow [data-hotel-preview-card] img {
  opacity: 1 !important;
}

.mhd-v9-supporter-flow .mhd-v77-affiliate-disclosure {
  color: #4d421a !important;
  background: #fff7d9 !important;
}


/* ================================================================
   6. ALL NON-BUILDER INFORMATION SECTIONS
      Default them to a readable light editorial surface.
   ================================================================ */

.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context) {
  color: #111318 !important;
  background:
    linear-gradient(
      180deg,
      #f7f1e6,
      #fffaf0
    ) !important;
}

.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context)
  h1,
.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context)
  h2,
.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context)
  h3,
.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context)
  h4,
.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context)
  strong {
  color: #111318 !important;
}

.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context)
  p,
.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow):not(.mhd-budget-v1):not(.seo-v74-return-context)
  small {
  color: #515b69 !important;
}


/* ================================================================
   7. FIXTURE INTELLIGENCE / STATION CARDS — explicit light cards
   ================================================================ */

.mhd-v9-fixture-page .mhd-v77-intelligence {
  color: #111318 !important;
  background:
    linear-gradient(
      140deg,
      #ffffff,
      #f3f5f8
    ) !important;
}

.mhd-v9-fixture-page .mhd-v77-intelligence .section-heading h2,
.mhd-v9-fixture-page .mhd-v77-intelligence .section-heading h3 {
  color: #111318 !important;
}

.mhd-v9-fixture-page .mhd-v77-intelligence .section-heading p {
  color: #596273 !important;
}

.mhd-v9-fixture-page .mhd-v77-intelligence-grid article,
.mhd-v9-fixture-page .seo-v74-info-grid article,
.mhd-v9-fixture-page .seo-v74-info-grid > article {
  color: #111318 !important;
  border-color: #d9dee7 !important;
  background: #ffffff !important;
}

.mhd-v9-fixture-page .mhd-v77-intelligence-grid h1,
.mhd-v9-fixture-page .mhd-v77-intelligence-grid h2,
.mhd-v9-fixture-page .mhd-v77-intelligence-grid h3,
.mhd-v9-fixture-page .mhd-v77-intelligence-grid strong,
.mhd-v9-fixture-page .seo-v74-info-grid h1,
.mhd-v9-fixture-page .seo-v74-info-grid h2,
.mhd-v9-fixture-page .seo-v74-info-grid h3,
.mhd-v9-fixture-page .seo-v74-info-grid strong {
  color: #111318 !important;
}

.mhd-v9-fixture-page .mhd-v77-intelligence-grid p,
.mhd-v9-fixture-page .mhd-v77-intelligence-grid small,
.mhd-v9-fixture-page .seo-v74-info-grid p,
.mhd-v9-fixture-page .seo-v74-info-grid small {
  color: #596273 !important;
}


/* ================================================================
   8. RETURN-JOURNEY SECTION — explicit dark surface
   ================================================================ */

.mhd-v9-fixture-page .seo-v74-return-context {
  color: #ffffff !important;
  background: #171717 !important;
}

.mhd-v9-fixture-page .seo-v74-return-context h1,
.mhd-v9-fixture-page .seo-v74-return-context h2,
.mhd-v9-fixture-page .seo-v74-return-context h3,
.mhd-v9-fixture-page .seo-v74-return-context strong,
.mhd-v9-fixture-page .seo-v74-return-context a {
  color: #ffffff !important;
}

.mhd-v9-fixture-page .seo-v74-return-context p,
.mhd-v9-fixture-page .seo-v74-return-context small {
  color: #ececec !important;
}

.mhd-v9-fixture-page .seo-v74-return-context .eyebrow {
  color: #ff6331 !important;
}


/* ================================================================
   9. GENERIC LIGHT CARDS INSIDE DARK PAGE
   ================================================================ */

.mhd-v9-fixture-page .seo-v74-stay-grid article,
.mhd-v9-fixture-page .seo-v74-pub-card,
.mhd-v9-fixture-page .seo-v74-news-grid article,
.mhd-v9-fixture-page .seo-v74-empty {
  color: #111318 !important;
}

.mhd-v9-fixture-page .seo-v74-stay-grid article h1,
.mhd-v9-fixture-page .seo-v74-stay-grid article h2,
.mhd-v9-fixture-page .seo-v74-stay-grid article h3,
.mhd-v9-fixture-page .seo-v74-pub-card h1,
.mhd-v9-fixture-page .seo-v74-pub-card h2,
.mhd-v9-fixture-page .seo-v74-pub-card h3,
.mhd-v9-fixture-page .seo-v74-news-grid article h1,
.mhd-v9-fixture-page .seo-v74-news-grid article h2,
.mhd-v9-fixture-page .seo-v74-news-grid article h3 {
  color: #111318 !important;
}

.mhd-v9-fixture-page .seo-v74-stay-grid article p,
.mhd-v9-fixture-page .seo-v74-pub-card p,
.mhd-v9-fixture-page .seo-v74-news-grid article p,
.mhd-v9-fixture-page .seo-v74-empty p {
  color: #596273 !important;
}


/* ================================================================
   10. BUTTON CONTRAST
   ================================================================ */

.mhd-v9-fixture-page .button-primary {
  color: #ffffff !important;
}

.mhd-v9-supporter-flow .button-ghost,
.mhd-v9-supporter-flow .button-secondary {
  min-height: 46px;
}

/* Keep dark buttons readable when they sit on a light card. */
.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow)
  .button-ghost,
.mhd-v9-fixture-page
  > section.seo-v74-section:not(.mhd-v9-supporter-flow)
  .button-secondary {
  color: #111318;
}


/* ================================================================
   11. FALLBACKS FOR BROWSERS WITHOUT color-mix()
   ================================================================ */

@supports not (color: color-mix(in srgb, red, blue)) {
  .mhd-v9-supporter-flow {
    background:
      linear-gradient(
        180deg,
        #08131c,
        #0b1822 58%,
        #0a151e
      ) !important;
  }
}


/* ================================================================
   12. V9.0.1 RELEASE MARKER
   ================================================================ */

html[data-mhd-v9-format-repair="9.0.1"] {
  --mhd-v9-format-repair-loaded: 1;
}