:root {
  --ch-mm-ink: #1e293b;
  --ch-mm-muted: #64748b;
  --ch-mm-faint: #94a3b8;
  --ch-mm-line: #e8edf5;
  --ch-mm-line-strong: #dbe4f0;
  --ch-mm-surface: #f6f8fc;
  --ch-mm-primary: #2557a7;
  --ch-mm-primary-dark: #173d7a;
}


.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  gap: 6px;
}
.ch-mm-toggle .ch-mm-toggle__caret {
  transition: transform .2s ease;
}
.ch-mm-toggle[aria-expanded="true"] .ch-mm-toggle__caret {
  transform: rotate(180deg);
}
.header-menu-text ul.navbar-nav a.nav-link.ch-mm-toggle[aria-expanded="true"] {
  color: var(--ch-mm-primary);
  box-shadow: inset 0 -2px 0 0 var(--ch-mm-primary);
  text-decoration: none;
}
.ch-mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  text-align: left;
  background: #fff;
  border-top: 1px solid var(--ch-mm-line);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
  color: var(--ch-mm-ink);
  max-width: 1440px;
  margin: 0 auto;
}
.ch-mega-menu.is-open {
  display: block;
}
.ch-mega-menu__inner {
  display: grid;
  grid-template-columns: 1fr 320px;
}
.ch-mm-sections {
  position: relative;
  min-height: 400px;
  /* six suites in the rail; 480px clipped the last one */
  max-height: 520px;
}
.ch-mm-sections::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 325px;
  background: var(--ch-mm-surface);
  border-right: 1px solid var(--ch-mm-line);
}
.ch-mm-section__head {
  position: relative;
  z-index: 1;
  display: block;
  width: 296px;
  margin: 0 14px 4px;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  border-radius: 10px;
  opacity: .6;
  transition: background .15s ease, opacity .15s ease;
}
.ch-mm-section__head:first-of-type {
  margin-top: 14px;
}
.ch-mm-section__head:last-of-type {
  margin-bottom: 14px;
}
.ch-mm-section__head:hover,
.ch-mm-section__head:focus {
  opacity: 1;
  background: #e6edf8;
  outline: none;
}
.ch-mm-section__head.is-active {
  opacity: 1;
  background: #fff;
  border-color: var(--ch-mm-line-strong);
  border-left-color: var(--ch-mm-head-accent);
}
.ch-mm-section__head[disabled] {
  opacity: .4;
  cursor: default;
  background: transparent;
}
.ch-mm-section__head:focus-visible,
.ch-acc__button:focus-visible {
  outline: 2px solid var(--ch-mm-primary);
  outline-offset: 2px;
}
.ch-mm-section__title {
  display: grid;
  align-items: center;
  grid-template-columns: 25px 1fr;
  gap: 10px;
}
.ch-mm-section__title svg {
  width: 25px;
  height: 25px;
}
.ch-mm-section__title b {
  font-size: 16px;
  color: #475569;
}
.ch-mm-section__head.is-active .ch-mm-section__title b {
  color: var(--ch-mm-ink);
}
.ch-mm-section__sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: normal;
  color: var(--ch-mm-faint);
}
.ch-mm-section__head.is-active .ch-mm-section__sub {
  color: var(--ch-mm-muted);
}
.ch-mm-section__caret {
  display: none;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.ch-mm-section__head[aria-expanded="true"] .ch-mm-section__caret {
  transform: rotate(90deg);
}
.ch-mm-section__body {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  padding: 20px;
  overflow-y: auto;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  align-content: start;
  /* per-suite accent, overridden by the modifiers below */
  --ch-mm-accent: var(--ch-mm-primary);
  --ch-mm-accent-soft: #f1f5fb;
  --ch-mm-tint: var(--ch-mm-surface);
}
/* hover tint: one step darker than the surface tint above */
.ch-mega-menu { --ch-mm-hover: #e6edf8; }
.ch-mm-section__body { --ch-mm-hover: #e6edf8; }
.ch-mm-section__body--scoring { --ch-mm-hover: #e4f2e9; }
.ch-mm-section__body--crm { --ch-mm-hover: #f7efe1; }
.ch-mm-section__body--business { --ch-mm-hover: #e9dcf8; }
.ch-mm-section__body--booking { --ch-mm-hover: #ddf6f1; }
.ch-mm-section__body--professional { --ch-mm-hover: #ffe4e6; }
.ch-mm-menu--portal { --ch-mm-hover: #e7ecf2; }
.ch-mm-menu--tournaments { --ch-mm-hover: #f7efe1; }
.ch-mm-menu--auctions { --ch-mm-hover: #e6edf8; }
.ch-mm-menu--matches { --ch-mm-hover: #e4f2e9; }
.ch-mm-menu--overlay { --ch-mm-hover: #e3e9fe; }
.ch-mm-menu--network { --ch-mm-hover: #e9dcf8; }
.ch-mm-menu--resources { --ch-mm-hover: #ddeff4; }

.ch-mm-section__body.is-active {
  display: grid;
}
.ch-mm-section__body--scoring {
  --ch-mm-accent: #16a34a;
  --ch-mm-accent-soft: #f1f8f3;
  --ch-mm-tint: #f1f8f3;
}
.ch-mm-section__body--crm {
  --ch-mm-accent: #d97706;
  --ch-mm-accent-soft: #fbf6ee;
  --ch-mm-tint: #fbf6ee;
}
.ch-mm-section__body--business {
  --ch-mm-accent: #7c3aed;
  --ch-mm-accent-soft: #f1e9fb;
  --ch-mm-tint: #f1e9fb;
}
.ch-mm-panel__title {
  grid-column: 1 / -1;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: bold;
  color: var(--ch-mm-accent);
  text-transform: capitalize;
}
.ch-mm-feature {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ch-mm-ink);
}
.ch-mm-feature:hover,
.ch-mm-feature:focus {
  background: var(--ch-mm-hover);
  color: var(--ch-mm-ink);
  text-decoration: none;
}
.ch-mm-feature--soon {
  opacity: .75;
}
.ch-mm-feature__ico {
  flex-shrink: 0;
}
.ch-mm-feature__ico svg {
  width: 28px;
  height: 28px;
}
.ch-mm-feature b {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
.ch-mm-feature b span {
  background: rgb(253, 230, 138);
  color: rgb(146, 64, 14);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}
.ch-mm-feature p {
  margin: 0;
  font-size: 14px;
  color: var(--ch-mm-muted);
}
.ch-mm-panel__more {
  margin: 4px 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: var(--ch-mm-accent);
}
.ch-mm-panel__more:hover,
.ch-mm-panel__more:focus {
  background: var(--ch-mm-hover);
  box-shadow: 0 0 0 6px var(--ch-mm-hover);
  border-radius: 4px;
  color: var(--ch-mm-accent);
  text-decoration: none;
}
.ch-mm-soon-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fde68a;
  color: #92400e;
  font-size: 10px;
  font-weight: 800;
}
/* right column: one static app card */
.ch-mm-promo {
  margin: 24px 28px;
}
.ch-mm-promo__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 360px;
  padding: 24px;
  border-radius: 14px;
  background: linear-gradient(140deg, #2557a7, #1e3a8a);
  color: #fff;
}
.ch-mm-promo__flag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.ch-mm-promo__card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
}
.ch-mm-promo__card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: .85;
}
.ch-mm-promo__note {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: 11px;
  opacity: .8;
}
/* the store badges sit at the bottom of the card */
.ch-mm-promo__stores {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.ch-mm-promo__store {
  display: block;
  line-height: 0;
}
.ch-mm-promo__store img {
  width: 100%;
  height: auto;
}
.ch-mm-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 12px 32px;
  background: var(--ch-mm-surface);
  border-top: 1px solid var(--ch-mm-line);
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}
.ch-mm-strip a {
  color: #475569;
}
.ch-mm-strip a:hover {
  color: var(--ch-mm-primary);
  text-decoration: none;
}
.ch-mm-strip__whatsapp {
  margin-left: auto;
  color: var(--ch-mm-primary) !important;
}
/* ---- account button + menu ------------------------------------------------
   From the "Mega Menu — Authenticated User (SVG Icons)" design: a gradient
   avatar, the name with the handle under it, and a menu that opens with the
   member card, then the items with their icons and one-line descriptions.
   ------------------------------------------------------------------------ */
.header-links li.ch-acc {
  position: relative;
  display: inline-block;
  text-align: left;
  font-size: 13px;
}
.ch-acc__button {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease;
}
.ch-acc__button:hover,
.ch-acc__button:focus {
  background: #f9fafb;
  outline: none;
}
.ch-acc__button[aria-expanded="true"] {
  border-color: var(--ch-mm-primary);
}
/* the avatar: a gradient circle with a white silhouette, drawn here rather than as inline
   SVG because the component renders twice and a gradient id would be duplicated */
.ch-acc__avatar {
  flex-shrink: 0;
  display: inline-block;
  border-radius: 50%;
  background-color: #667eea;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='10' r='4' fill='%23fff'/%3E%3Cpath d='M 8 24 Q 8 18 16 18 Q 24 18 24 24' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
.ch-acc__avatar--sm {
  width: 32px;
  height: 32px;
}
.ch-acc__avatar--lg {
  width: 40px;
  height: 40px;
}
.ch-acc__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  max-width: 150px;
}
.ch-acc__name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ch-mm-ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-acc__handle {
  font-size: 12px;
  color: var(--ch-mm-faint);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.ch-acc__caret {
  flex-shrink: 0;
  margin-left: 4px;
  transition: transform .2s ease;
}
.ch-acc__button[aria-expanded="true"] .ch-acc__caret {
  transform: rotate(180deg);
}
.ch-acc__menu {
  /* one place to size an item: the items and the Administration / impersonation links share these */
  --ch-acc-title-size: 16px;
  --ch-acc-sub-size: 14px;
  --ch-acc-item-pad: 10px 15px;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 70;
  min-width: 280px;
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--ch-mm-line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .15);
  color: var(--ch-mm-ink);
  overflow: hidden;
}
.ch-acc__menu.is-open {
  display: block;
  animation: ch-acc-pop .16s ease;
}
@keyframes ch-acc-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
/* the member card */
.ch-acc__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--ch-mm-line);
}
.ch-acc__profile-text {
  min-width: 0;
}
.ch-acc__profile-text > div {
  margin: 0;
  line-height: 1.35;
}
.ch-acc__profile-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--ch-mm-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-acc__profile-mail {
  font-size: 12px;
  color: var(--ch-mm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-acc__profile-since {
  margin-top: 3px !important;
  font-size: 12px;
  font-weight: 500;
  color: #777;
}
.ch-acc__group + .ch-acc__group {
  border-top: 1px solid var(--ch-mm-line);
}
.ch-acc__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--ch-acc-item-pad);
  color: var(--ch-mm-ink);
  transition: background-color .12s ease;
}
.ch-acc__item:hover,
.ch-acc__item:focus {
  background: var(--ch-mm-surface);
  color: var(--ch-mm-ink);
  text-decoration: none;
  outline: none;
}
.ch-acc__item svg {
  flex-shrink: 0;
}
.ch-acc__item-text {
  flex: 1;
  min-width: 0;
}
.ch-acc__item-title {
  display: block;
  font-size: var(--ch-acc-title-size);
  font-weight: 700;
  line-height: 1.3;
  color: #000;
}
.ch-acc__item-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--ch-acc-sub-size);
  font-weight: 400;
  color: var(--ch-mm-faint);
}
.ch-acc__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #3b82f6;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.3;
  vertical-align: middle;
}
.ch-acc__item--danger,
.ch-acc__item--danger .ch-acc__item-title {
  color: #dc2626;
}
.ch-acc__item--danger:hover,
.ch-acc__item--danger:focus {
  background: #fee2e2;
  color: #dc2626;
}
/* Administration and impersonation come from nop's AdminHeaderLinks component; they are
   dressed as items here - an icon before the text, the same padding and hover */
.ch-acc__menu .admin-header-links {
  display: block;
  margin: 0;
  text-align: left;
  color: inherit;
}
.ch-acc__menu .admin-header-links * {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.ch-acc__menu .admin-header-links > a,
.ch-acc__menu .admin-header-links .impersonate {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: var(--ch-acc-item-pad);
  background: transparent;
  border-radius: 0;
  font-size: var(--ch-acc-title-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ch-mm-ink);
  transition: background-color .12s ease;
}
.ch-acc__menu .admin-header-links > a::before,
.ch-acc__menu .admin-header-links .impersonate::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: center / contain no-repeat;
}
.ch-acc__menu .admin-header-links > a.administration::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 1.5 15 4v4.5c0 3.7-2.6 6.6-6 7.5-3.4-.9-6-3.8-6-7.5V4z' fill='none' stroke='%232557a7' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M6.5 9l1.8 1.8L11.8 7' fill='none' stroke='%232557a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ch-acc__menu .admin-header-links > a.manage-page::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M12.5 2.5l3 3L6 15H3v-3z' fill='none' stroke='%232557a7' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ch-acc__menu .admin-header-links > a:hover,
.ch-acc__menu .admin-header-links > a:focus {
  background: var(--ch-mm-surface);
  color: var(--ch-mm-ink);
  text-decoration: none;
}
.ch-acc__menu .admin-header-links .impersonate::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='6' cy='5' r='2.5' fill='%23d97706'/%3E%3Cpath d='M 1 14 Q 1 10 6 10 Q 11 10 11 14' fill='%23d97706'/%3E%3Cpath d='M 11 6 L 17 12 M 17 6 L 11 12' stroke='%23d97706' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ch-acc__menu .admin-header-links .impersonate:hover {
  background: #fbf6ee;
}
.ch-acc__menu .admin-header-links .impersonate span,
.ch-acc__menu .admin-header-links .impersonate a {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.ch-acc__menu .admin-header-links .impersonate span {
  display: block;
  font-size: var(--ch-acc-title-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ch-mm-ink);
}
.ch-acc__menu .admin-header-links .impersonate a {
  display: block;
  margin-top: 2px;
  font-size: var(--ch-acc-sub-size);
  font-weight: 400;
  color: var(--ch-mm-faint);
}
.ch-acc__menu .admin-header-links .impersonate a:hover,
.ch-acc__menu .admin-header-links .impersonate a:focus {
  background: transparent;
  color: #d97706;
  text-decoration: underline;
}
/* the impersonation line: icon in the first column, its two texts stacked in the second */
.ch-acc__menu .admin-header-links .impersonate {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 1px;
  align-items: center;
}
.ch-acc__menu .admin-header-links .impersonate::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
.ch-acc__menu .admin-header-links .impersonate span,
.ch-acc__menu .admin-header-links .impersonate a {
  grid-column: 2;
  position: static;
  float: none;
  text-align: left;
  white-space: normal;
}

.header .navbar .navbar-nav li.nav-item.features-nav-item {
  position: unset;
}

/* ---- per-product accent on the sidebar: the active tile's bar takes its suite's colour ---- */
.ch-mm-section__head {
  --ch-mm-head-accent: var(--ch-mm-primary);
}
#ch-mm-head-scoring  { --ch-mm-head-accent: #16a34a; }
#ch-mm-head-crm      { --ch-mm-head-accent: #d97706; }
#ch-mm-head-business { --ch-mm-head-accent: #7c3aed; }
#ch-mm-head-booking  { --ch-mm-head-accent: #0d9488; }

/* ---- desktop: the panel keeps its two feature columns and scrolls sideways instead of clipping ---- */
.ch-mega-menu {
  overflow-x: auto;
}
.ch-mega-menu__inner {
  min-width: 1080px;
}

/* ---- Box Booking panel ---- */
.ch-mm-section__body--booking {
  --ch-mm-accent: #0d9488;
  --ch-mm-accent-soft: #effcf9;
  --ch-mm-tint: #effcf9;
}
.ch-mm-panel__title--upper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-mm-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.ch-mm-section__body--booking .ch-mm-feature__ico svg {
  width: 26px;
  height: 26px;
  margin-top: 2px;
}
/* the rows tint on hover even though they are not links yet */
.ch-mm-section__body--booking .ch-mm-feature:hover {
  background: var(--ch-mm-hover);
}
.ch-mm-section__title b span {
  background: rgb(253, 230, 138);
  color: rgb(146, 64, 14);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

/* The two calls to action at the foot of the panel - one for venue owners, one
   for players. They span both feature columns and sit under the "all features"
   link. Everything here is scoped to this panel, so no other section picks it
   up. */
.ch-mm-section__body--booking .ch-mm-cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.ch-mm-section__body--booking .ch-mm-cta__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.ch-mm-section__body--booking .ch-mm-cta__card:hover,
.ch-mm-section__body--booking .ch-mm-cta__card:focus {
  text-decoration: none;
  transform: translateY(-1px);
}
.ch-mm-section__body--booking .ch-mm-cta__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-mm-section__body--booking .ch-mm-cta__ico svg {
  display: block;
  width: 20px;
  height: 20px;
}
.ch-mm-section__body--booking .ch-mm-cta__card b {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.ch-mm-section__body--booking .ch-mm-cta__note {
  font-size: 13px;
  line-height: 1.35;
}
.ch-mm-section__body--booking .ch-mm-cta__btn {
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* owner-facing card: filled with the panel accent so it reads as the primary
   action */
.ch-mm-section__body--booking .ch-mm-cta__card--fill {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
}
.ch-mm-section__body--booking .ch-mm-cta__card--fill b,
.ch-mm-section__body--booking .ch-mm-cta__card--fill:hover b,
.ch-mm-section__body--booking .ch-mm-cta__card--fill:focus b {
  color: #fff;
}
.ch-mm-section__body--booking .ch-mm-cta__card--fill .ch-mm-cta__note {
  color: rgba(255, 255, 255, .86);
}
.ch-mm-section__body--booking .ch-mm-cta__card--fill .ch-mm-cta__btn {
  background: #fff;
  color: #0f766e;
}
.ch-mm-section__body--booking .ch-mm-cta__card--fill:hover,
.ch-mm-section__body--booking .ch-mm-cta__card--fill:focus {
  color: #fff;
  box-shadow: 0 6px 16px rgba(13, 148, 136, .28);
}

/* player-facing card: outlined, so the pair reads as primary + secondary */
.ch-mm-section__body--booking .ch-mm-cta__card--line {
  background: #fff;
  border: 1px solid #99f6e4;
  color: var(--ch-mm-ink);
}
.ch-mm-section__body--booking .ch-mm-cta__card--line .ch-mm-cta__ico {
  color: #0d9488;
}
.ch-mm-section__body--booking .ch-mm-cta__card--line b {
  color: #000;
}
.ch-mm-section__body--booking .ch-mm-cta__card--line .ch-mm-cta__note {
  color: var(--ch-mm-muted);
}
.ch-mm-section__body--booking .ch-mm-cta__card--line .ch-mm-cta__btn {
  background: #ccfbf1;
  color: #0f766e;
}
.ch-mm-section__body--booking .ch-mm-cta__card--line:hover,
.ch-mm-section__body--booking .ch-mm-cta__card--line:focus {
  border-color: #5eead4;
  color: var(--ch-mm-ink);
  box-shadow: 0 6px 16px rgba(13, 148, 136, .14);
}

/* ---- Professional Profiles panel ---- */
.ch-mm-section__body--professional {
  --ch-mm-accent: #be123c;
  --ch-mm-accent-soft: #fff1f2;
  --ch-mm-tint: #fff1f2;
}
#ch-mm-head-professional { --ch-mm-head-accent: #be123c; }
.ch-mm-section__body--professional .ch-mm-panel__more {
  grid-column: 1 / -1;
  margin-top: 10px;
}
.ch-mm-section__body--professional .ch-mm-feature__ico svg {
  width: 26px;
  height: 26px;
  margin-top: 2px;
}

/* the "find professionals" group label runs the full width of the panel's
   two-column grid, with a rule marking where the group starts */
.ch-mm-section__body--professional .ch-mm-chips__title--group {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--ch-mm-line);
  color: var(--ch-mm-muted);
}

/* This panel has the longest row subtitles in the menu. Four columns-widths of
   padding narrower and they wrap to a second line, which is what pushes the
   panel past its height - so the two columns sit a little closer together here
   and the row spacing itself stays the same as every other panel. */
.ch-mm-section__body--professional {
  column-gap: 24px;
}

/* The Box Booking panel holds more than the section rail is tall. Rather than
   cramping its rows - every panel shares one spacing rhythm - the menu
   stretches while it is the open one, to just past what its content needs.
   The other five keep the 520px the rail sets. */
.ch-mm-sections:has(.ch-mm-section__body--booking.is-active) {
  max-height: none;
  min-height: 530px;
}

/* ---- the rest of the nav ---------------------------------------------------
   These menus show everything at once: an intro rail on the left and every
   group beside it, no tabs. Each sets one accent and the shared tokens pick it
   up. The Features menu keeps its per-suite accents and its rail; nothing in
   this block reaches it.
   -------------------------------------------------------------------------- */
.header .navbar .navbar-nav li.nav-item.ch-mm-nav-item {
  position: unset;
}

.ch-mm-menu--portal      { --ch-mm-menu-accent: #475569; --ch-mm-menu-soft: #f1f5f9; --ch-mm-menu-line: #dbe3ec; }
.ch-mm-menu--tournaments { --ch-mm-menu-accent: #d97706; --ch-mm-menu-soft: #fbf6ee; --ch-mm-menu-line: #f1dcb8; }
.ch-mm-menu--auctions    { --ch-mm-menu-accent: #2557a7; --ch-mm-menu-soft: #f1f5fb; --ch-mm-menu-line: #cfe0f7; }
.ch-mm-menu--matches     { --ch-mm-menu-accent: #16a34a; --ch-mm-menu-soft: #f1f8f3; --ch-mm-menu-line: #c7e8d3; }
.ch-mm-menu--overlay     { --ch-mm-menu-accent: #4f46e5; --ch-mm-menu-soft: #eef2ff; --ch-mm-menu-line: #cfd7fb; }
.ch-mm-menu--network     { --ch-mm-menu-accent: #7c3aed; --ch-mm-menu-soft: #f1e9fb; --ch-mm-menu-line: #e0d0f7; }
.ch-mm-menu--resources   { --ch-mm-menu-accent: #0e7490; --ch-mm-menu-soft: #ecf7fa; --ch-mm-menu-line: #c9e6ee; }

/* the panel: intro rail + the groups */
.ch-mm-flat {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-width: 0;
}

.ch-mm-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  background: var(--ch-mm-surface);
  border-right: 1px solid var(--ch-mm-line);
}
.ch-mm-intro__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ch-mm-menu-line);
  border: 1px solid var(--ch-mm-menu-accent);
}
.ch-mm-intro__ico svg {
  stroke: var(--ch-mm-menu-accent);
  fill: none;
}
.ch-mm-intro__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ch-mm-ink);
}
.ch-mm-intro__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ch-mm-muted);
}
.ch-mm-intro__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ch-mm-muted);
}
.ch-mm-intro__legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-mm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ch-mm-faint);
}
.ch-mm-dot--live { background: #16a34a; }
.ch-mm-dot--open { background: #d97706; }
.ch-mm-dot--done { background: #94a3b8; }
.ch-mm-intro__cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ch-mm-menu-accent);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.ch-mm-intro__cta:hover,
.ch-mm-intro__cta:focus {
  opacity: .9;
  text-decoration: none;
}

.ch-mm-cols {
  display: grid;
  gap: 4px 24px;
  align-content: start;
  padding: 24px 28px;
}
.ch-mm-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch-mm-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ch-mm-col__title {
  margin: 0 0 6px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  line-height: 1.4;
  color: var(--ch-mm-menu-accent);
  text-transform: uppercase;
}
.ch-mm-cols .ch-mm-feature {
  padding: 9px 12px;
  --ch-mm-accent-soft: var(--ch-mm-menu-soft);
}
.ch-mm-cols .ch-mm-feature b {
  font-size: 14px;
}
.ch-mm-cols .ch-mm-feature p {
  font-size: 12.5px;
  line-height: 1.45;
}

/* the banner some menus carry under their groups */
.ch-mm-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 14px;
  border-radius: 12px;
  background: var(--ch-mm-menu-soft);
  border: 1px solid var(--ch-mm-line-strong);
}
.ch-mm-banner__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
}
.ch-mm-banner__ico svg {
  stroke: var(--ch-mm-menu-accent);
  fill: none;
}
.ch-mm-banner__text {
  flex: 1;
  min-width: 220px;
}
.ch-mm-banner__text b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ch-mm-ink);
  line-height: normal;
}
.ch-mm-banner__text p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ch-mm-muted);
  line-height: normal;
}
.ch-mm-banner__cta {
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--ch-mm-menu-accent);
  color: #fff !important;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.ch-mm-banner__cta:hover,
.ch-mm-banner__cta:focus {
  opacity: .9;
  text-decoration: none;
}
.ch-mm-banner__stores {
  display: flex;
  gap: 8px;
}

/* badges from the design: the shared chip styling with its own colour per state */
.ch-mm-menu [class*="ch-mm-badge--"] {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}
.ch-mm-menu .ch-mm-feature b span { background: #fef3c7; color: #92400e; }
.ch-mm-badge--live    { background: #fee2e2; color: #b91c1c; }
.ch-mm-badge--new     { background: #dbeafe; color: #1d4ed8; }
.ch-mm-badge--popular { background: #fef3c7; color: #92400e; }
.ch-mm-badge--premium { background: #ede9fe; color: #6d28d9; }
.ch-mm-badge--soon    { background: #ccfbf1; color: #0f766e; }

/* the strips that read as a run-through keep their steps quiet and the action at the end */
.ch-mm-menu .ch-mm-strip span:first-child {
  color: var(--ch-mm-menu-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ch-mm-menu .ch-mm-strip__end {
  margin-left: auto;
  color: var(--ch-mm-menu-accent) !important;
}

/* ---- the Network panel: two cards and the role pills, as the design lays them out ---- */
.ch-mm-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 28px;
  min-width: 0;
}
.ch-mm-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ch-mm-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--ch-mm-line);
  border-radius: 14px;
  background: #fff;
  color: var(--ch-mm-ink);
}
.ch-mm-card:hover,
.ch-mm-card:focus {
  background: var(--ch-mm-hover);
  border-color: var(--ch-mm-menu-accent);
  color: var(--ch-mm-ink);
  text-decoration: none;
}
.ch-mm-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-mm-card__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ch-mm-menu-line);
  border: 1px solid var(--ch-mm-menu-accent);
}
.ch-mm-card:hover .ch-mm-card__ico,
.ch-mm-card:focus .ch-mm-card__ico {
  background: #fff;
}
.ch-mm-card__ico svg {
  stroke: var(--ch-mm-menu-accent);
  fill: none;
}
.ch-mm-card__head b {
  font-size: 15px;
  font-weight: 800;
}
.ch-mm-card__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ch-mm-muted);
}
.ch-mm-card__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #334155;
}
.ch-mm-card__list span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-mm-card__list svg {
  flex-shrink: 0;
  stroke: var(--ch-mm-menu-accent);
  fill: none;
}
.ch-mm-card__cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--ch-mm-menu-accent);
}

.ch-mm-chips__title {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--ch-mm-menu-accent);
  text-transform: uppercase;
}
.ch-mm-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ch-mm-chip {
  padding: 7px 14px;
  border: 1px solid var(--ch-mm-line-strong);
  border-radius: 99px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.ch-mm-chip:hover,
.ch-mm-chip:focus {
  background: var(--ch-mm-hover);
  border-color: var(--ch-mm-menu-accent);
  color: var(--ch-mm-menu-accent);
  text-decoration: none;
}

/* ---- the run-through rail the design puts under the groups ---- */
.ch-mm-steps {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--ch-mm-menu-soft);
  border: 1px solid var(--ch-mm-menu-line);
}
.ch-mm-steps__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--ch-mm-menu-accent);
  text-transform: uppercase;
}
.ch-mm-steps__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}
.ch-mm-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 99px;
  border: 1px solid var(--ch-mm-menu-line);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: var(--ch-mm-menu-accent);
}
.ch-mm-steps__arrow {
  color: var(--ch-mm-menu-line);
  font-weight: 700;
}
.ch-mm-steps__cta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--ch-mm-menu-accent);
  white-space: nowrap;
}
.ch-mm-steps__cta:hover,
.ch-mm-steps__cta:focus {
  background: #fff;
  box-shadow: 0 0 0 6px #fff;
  border-radius: 4px;
  color: var(--ch-mm-menu-accent);
  text-decoration: none;
}

/* the status dot the design shows beside a few rows */
.ch-mm-cols .ch-mm-feature b .ch-mm-dot {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* the app badges in the Matches banner */
.ch-mm-banner__stores .ch-mm-store {
  display: block;
  line-height: 0;
}
.ch-mm-banner__stores img {
  display: block;
  height: 40px;
  width: auto;
}

/* ---- the portal button, moved out of the top menu into the header ---- */
.header-links li.ch-portal {
  display: inline-block;
  vertical-align: middle;
}
.header-links li.ch-portal a.ch-portal__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 5px;
  background: var(--ch-mm-primary);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  height: 100%;
}
.header-links li.ch-portal a.ch-portal__btn:hover,
.header-links li.ch-portal a.ch-portal__btn:focus {
  background: var(--ch-mm-primary-dark);
  color: #fff;
  text-decoration: none;
}
.ch-portal__btn svg {
  flex-shrink: 0;
}

/* the header bar keeps the button and the account side by side */
.desktop-toggle:has(li.ch-portal),
.mobile-toggle:has(li.ch-portal) {
  flex-shrink: 0;
}
.header-links ul:has(li.ch-portal) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
}
/* the buttons in this row share one height and none of them may squeeze the others */
.header-links ul:has(li.ch-portal) > li {
  flex: 0 0 auto;
  align-self: stretch;
}
.ch-portal__btn {
  white-space: nowrap;
}
.header-links ul:has(li.ch-portal) .login-btn .primary-btn {
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: center;
}