/* SUBGAME GAME PRICE SWITCH V4 — CLEAN DESIGN */

.sg-game-price-switch {
    margin: 0 0 16px;
    font-family: inherit;
}

.sg-game-price-options {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: stretch;
    gap: 5px;
    padding: 6px;
    box-sizing: border-box;
    background: #080808;
    border: 1px solid #353535;
    border-radius: 14px;
    box-shadow:
        inset 0 5px 11px rgba(0,0,0,1),
        inset 0 -1px 0 rgba(255,255,255,.07),
        0 5px 14px rgba(0,0,0,.30);
}

.sg-game-price-option {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: 48px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid #343434;
    border-radius: 9px;
    background: linear-gradient(180deg,#292929,#202020);
    color: #ddd;
    font-family: inherit;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 2px 4px rgba(0,0,0,.55);
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.sg-game-price-option:hover {
    color: #fff;
    border-color: #666;
    background: linear-gradient(180deg,#343434,#252525);
    transform: translateY(-1px);
}

.sg-game-price-option.is-current {
    color: #fff;
    border-color: #ffd400;
    background: linear-gradient(180deg,#3b3520,#211e15);
    transform: translateY(-2px);
    animation: sgGamePriceGlow 2.4s ease-in-out infinite;
}

.sg-game-price-flag {
    font-size: 23px;
    line-height: 1;
    flex: 0 0 auto;
}

.sg-game-price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    line-height: 1;
}

.sg-game-price-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.sg-game-price-value {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #aaa;
    white-space: nowrap;
}

.sg-game-price-option.is-current .sg-game-price-value {
    color: #e3d58b;
}

.sg-game-price-value::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border: 1px solid #777;
    border-radius: 50%;
    background: #151515;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.9);
}

.sg-game-price-option.is-current .sg-game-price-value::before {
    border-color: #ffd400;
    background: #ffd400;
    box-shadow:
        0 0 4px #ffd400,
        0 0 10px rgba(255,212,0,.9);
}

.sg-game-price-option:focus-visible {
    outline: 2px solid #ffd400;
    outline-offset: 3px;
}

@keyframes sgGamePriceGlow {
    0%,100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            0 0 0 1px rgba(255,212,0,.22),
            0 0 9px rgba(255,212,0,.22);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 0 0 1px rgba(255,212,0,.38),
            0 0 18px rgba(255,212,0,.48);
    }
}

@media (max-width:700px) {
    .sg-game-price-options {
        gap: 4px;
        padding: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sg-game-price-options::-webkit-scrollbar {
        display: none;
    }

    .sg-game-price-option {
        min-width: 105px;
        height: 44px;
        padding: 0 9px;
        gap: 6px;
    }

    .sg-game-price-flag {
        font-size: 20px;
    }

    .sg-game-price-name {
        font-size: 12px;
    }

    .sg-game-price-value {
        font-size: 10px;
    }

    .sg-game-price-option.is-current {
        transform: none;
        animation: none;
    }

    .sg-game-price-option::after {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-game-price-option {
        animation: none;
        transition: none;
    }
}