/* Custom CSS rules for gamepack */
/* These are NOT tokens - they are custom overrides */

/* Bottom nav positioning */
:root[data-product="gamepack"] .nav-bottom-wrapper {
  margin: var(--nav-bottom-container-margin, 10px auto);
  padding-inline: var(--nav-bottom-container-padding-inline, 0);
  width: min(var(--nav-bottom-width, 620px), calc(100% - 20px));
  max-width: min(var(--nav-bottom-max-width, 620px), calc(100% - 20px));
  box-sizing: border-box;
}

:root[data-product="gamepack"] .nav-bottom-inner {
  width: 100%;
  max-width: 100%;
}

/* Card grid sizing overrides */
[data-product="gamepack"] .wrapper[data-size='medium'] {
  --card-cover-width: 180px;
}

/* Explore page theming (light text on dark bg) */
:root[data-product="gamepack"] .exploreWrapper {
  color: #fff;
}

:root[data-product="gamepack"] .searchSection {
  color: #fff;
}

:root[data-product="gamepack"] .searchHeader form {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
}

:root[data-product="gamepack"] .searchHeader .inputPrimary {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

:root[data-product="gamepack"] .searchHeader .inputPrimary::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

:root[data-product="gamepack"] .searchStringsWrapper h5,
:root[data-product="gamepack"] .cardsWrapper h5,
:root[data-product="gamepack"] .sectionHeading,
:root[data-product="gamepack"] .messageText {
  color: #fff;
}

:root[data-product="gamepack"] .sectionTitle {
  color: #fff;
}

:root[data-product="gamepack"] .titleHighlight {
  color: var(--accent, #fff);
}

:root[data-product="gamepack"] .loading {
  color: rgba(255, 255, 255, 0.7);
}

:root[data-product="gamepack"] .searchString p {
  color: rgba(255, 255, 255, 0.9);
}

:root[data-product="gamepack"] .searchString .iconSmall {
  color: var(--nav-bottom-active-color, #60d3ba);
}

:root[data-product="gamepack"] .inputPrimary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

:root[data-product="gamepack"] .inputPrimary::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

:root[data-product="gamepack"] .highlight {
  color: var(--accent, #fff);
}

:root[data-product="gamepack"] .cardsWrapper h5,
:root[data-product="gamepack"] .recommendedContent,
:root[data-product="gamepack"] .recommendedContent .messageText {
  color: #fff;
}