/* ============================================================================================================
   USED GAMES PROMO (Shared/_UsedGamesPromo.cshtml, Oct 2026): links to /used-games from the home page, the platform
   pages, the used category pages and a used product's page. band = a strip, slim = one line, line = two links.
   ============================================================================================================ */
.g2-upromo, .g2-upromo * { box-sizing: border-box; }

.g2-upromo a { text-decoration: none !important; }
.g2-upromo--band { padding-block: 16px; }

/* (The Pre-owned menu panel's strip, .g2-panel--titled > .g2-menustrip: site.css "SHARED PARTS" - the header menu.) */

/* "split" (home): one band, "Buy used" | "Sell yours", the site's dark surface, two equal halves (stacked on phones). */
.g2-upromo--split { padding-top: var(--g2-section-space, 56px); }
.g2-upromo :is(h2, h3) { text-transform: none; letter-spacing: normal; }

.g2-upromo__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 20px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: hidden;
}

.g2-upromo__half { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 24px 28px; }
.g2-upromo__half + .g2-upromo__half { border-inline-start: 1px solid var(--g2-line); }
.g2-upromo__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g2-brand); }
[dir="rtl"] .g2-upromo__kicker { letter-spacing: 0; font-size: 12.5px; }
.g2-upromo .g2-upromo__title { margin: 0; font-size: var(--g2-title-size, 24px); font-weight: 700; line-height: 1.2; color: var(--g2-text) !important; text-wrap: balance; }
.g2-upromo__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 13.5px; line-height: var(--g2-text-lh, 1.45); color: var(--g2-muted); }
.g2-upromo__facts b { color: var(--g2-text); font-weight: 700; }
.g2-upromo__icons { display: inline-flex; gap: 8px; color: var(--g2-muted); }
.g2-upromo__steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--g2-muted); }
.g2-upromo__steps li { display: inline-flex; align-items: center; gap: 6px; }

.g2-upromo__steps i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--g2-raised);
    box-shadow: inset 0 0 0 1px var(--g2-line2);
    color: var(--g2-text);
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

.g2-upromo__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--g2-brand);
    color: #0b0d10 !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .2s;
}

.g2-upromo__btn:hover { background: var(--g2-brand-hover); }

@media (max-width: 767px) {
    .g2-upromo__split { grid-template-columns: minmax(0, 1fr); }
    .g2-upromo__half { padding: 20px; }
    .g2-upromo__half + .g2-upromo__half { border-inline-start: 0; border-top: 1px solid var(--g2-line); }
}

.g2-upromo__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 16px 20px;
    border-radius: 18px;
    border: 1px solid #2f3a22;
    background: linear-gradient(100deg, #151b10, var(--g2-surface));
}

[dir="rtl"] .g2-upromo__box { background: linear-gradient(260deg, #151b10, var(--g2-surface)); }

.g2-upromo__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(188, 215, 103, .12);
    color: #bcd767;
}

.g2-upromo__copy { flex: 1 1 260px; display: grid; gap: 2px; margin: 0; min-width: 0; }
.g2-upromo__copy b { color: var(--g2-text); font-size: 15px; font-weight: 600; }
.g2-upromo__copy span { color: var(--g2-muted); font-size: 13px; }
.g2-upromo__links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }

.g2-upromo--band .g2-upromo__main {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 12px;
    background: #bcd767;
    color: #14200a !important;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .25s, box-shadow .3s;
}

.g2-upromo--band .g2-upromo__main:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(188, 215, 103, .6); }
.g2-upromo__sell { color: #bcd767 !important; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.g2-upromo__sell:hover { text-decoration: underline !important; }

.g2-upromo--slim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #2f3a22;
    background: linear-gradient(100deg, #151b10, var(--g2-surface));
    font-size: 13px;
    color: var(--g2-muted);
}

[dir="rtl"] .g2-upromo--slim { background: linear-gradient(260deg, #151b10, var(--g2-surface)); }
.g2-upromo--slim .g2-upromo__main, .g2-upromo--line .g2-upromo__main { color: var(--g2-text) !important; font-weight: 600; white-space: nowrap; }
.g2-upromo--slim .g2-upromo__main:hover, .g2-upromo--line .g2-upromo__main:hover { color: #bcd767 !important; }

.g2-upromo--line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 8px 0 0; font-size: 13px; }
.g2-upromo--line .g2-upromo__main::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: #bcd767;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .g2-upromo__main { transition: none !important; }
    .g2-upromo--band .g2-upromo__main:hover { transform: none; }
}