/* The game shop reuses the theme's configurator components wholesale -- .hc-card,
   .hc-price, .hc-resources, .hc-picker, .hc-add-to-cart are all defined in
   cleancore/assets/css/configurator.css and are not restyled here.

   What follows is only the handful of things that page has no equivalent for: the
   category switcher, the small note under a term option, and the billing line. */

/* ------------------------------------------------- category switcher ----- */

/* Navigation between package categories, not a field inside a card -- which is why
   it does not reuse .hc-option. Sizes are in px on purpose: the theme's rem scale is
   tuned for the cards, and this row needs to hold its proportions independently of it. */

.cat-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 28px 0 32px;
}

.cat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 162px;
    min-height: 72px;
    padding: 12px 16px;
    position: relative;
    background: #0d1525;
    border: 1px solid rgba(105, 130, 170, 0.28);
    border-radius: 11px;
    color: #fff;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: background 200ms ease, border-color 200ms ease,
                transform 200ms ease, box-shadow 200ms ease;
}

/* Icon leads the card. In RTL that puts it on the right, which is what the row
   should look like -- no explicit side is set, so an LTR page mirrors correctly. */
.cat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    font-size: 22px;
    color: #8493aa;
    transition: color 200ms ease;
}

.cat-card__icon i { display: block; line-height: 1; }

/* Artwork keeps its own colours, so the active/hover recolouring that applies to the
   font glyphs has to stay off it. Nearest-neighbour keeps the pixel edges crisp
   rather than smearing them. */
.cat-card__icon img {
    display: block;
    width: 26px;
    height: 26px;
    image-rendering: pixelated;
    /* unselected categories sit back a little; the active one comes fully forward */
    opacity: 0.72;
    transition: opacity 200ms ease;
}

.cat-card:hover .cat-card__icon img,
.cat-card.is-active .cat-card__icon img { opacity: 1; }

/* A category whose artwork is a wordmark: the mark stands in for the icon and the
   label together, centred, with the package count beneath it. Same card size as the
   rest of the row -- only the contents differ. */
.cat-card--logo {
    justify-content: center;
    gap: 0;
    padding: 12px 14px;
}

.cat-card__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.cat-card__logo {
    display: block;
    width: 118px;
    height: auto;
    opacity: 0.72;
    transition: opacity 200ms ease;
}

.cat-card:hover .cat-card__logo,
.cat-card.is-active .cat-card__logo { opacity: 1; }

.cat-card--logo .cat-card__count { text-align: center; }

.cat-card__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cat-card__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-card__count {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.2;
    color: #8493aa;
    transition: color 200ms ease;
}

/* The active marker. Hidden rather than absent so switching does not reflow the row. */
.cat-card__dot {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00a8ff;
    opacity: 0;
    transition: opacity 200ms ease;
}

/* The blue-to-orange underline: the site's two accents, and the only place the
   orange appears in this row. */
.cat-card::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #00a8ff, #ff7a1a);
    opacity: 0;
    transition: opacity 200ms ease;
}

.cat-card:hover:not(.is-active) {
    background: #101b30;
    border-color: rgba(0, 168, 255, 0.45);
    transform: translateY(-2px);
}

.cat-card:hover:not(.is-active) .cat-card__icon { color: #b6c4d6; }

.cat-card:focus-visible {
    outline: 2px solid #00a8ff;
    outline-offset: 2px;
}

.cat-card.is-active {
    background: #0d2035;
    border-color: #00a8ff;
    box-shadow: 0 0 0 1px rgba(0, 168, 255, 0.18), 0 4px 16px rgba(0, 168, 255, 0.12);
}

.cat-card.is-active .cat-card__icon  { color: #00a8ff; }
.cat-card.is-active .cat-card__count { color: #4cc2ff; }
.cat-card.is-active .cat-card__dot   { opacity: 1; }
.cat-card.is-active::after           { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .cat-card { transition: none; }
    .cat-card:hover:not(.is-active) { transform: none; }
}

/* Below the tablet breakpoint the row scrolls sideways instead of stacking into
   rows too short to read. */
@media (max-width: 767px) {
    .cat-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* the row runs edge to edge, so it does not look clipped mid-card */
        margin-inline: -2rem;
        padding-inline: 2rem;
    }

    .cat-nav::-webkit-scrollbar { display: none; }

    .cat-card {
        flex-shrink: 0;
        width: 148px;
        min-height: 68px;
        scroll-snap-align: center;
    }

    /* the lift would be clipped by the scroll container */
    .cat-card:hover:not(.is-active) { transform: none; }
}

.hc-note {
    padding: 4.8rem 2rem;
    text-align: center;
    font-size: 1.6rem;
    color: #6b7c88;
}