@import "/UI/Core/Styles/Theme.scss";

.pointshop-shop {
    position: relative;

    .shop-balance-row {
        margin-top: 6px;
    }

    .shop-card {
        cursor: pointer;
    }

    .shop-status {
        margin-top: 8px;
        font-size: 12px;
        color: rgba( 255, 255, 255, 0.6 );
    }

    .purchase-confirm-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba( 0, 0, 0, 0.65 );
        cursor: pointer;
    }

    .purchase-confirm-modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate( -50%, -50% );
        width: 360px;
        max-width: 90%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 18px 20px 16px 20px;
        border-radius: 6px;
        background-color: rgba( 18, 18, 22, 0.98 );
        border: 1px solid rgba( 255, 255, 255, 0.12 );
        box-shadow: 0px 12px 32px rgba( 0, 0, 0, 0.6 );
    }

    .purchase-confirm-title {
        font-size: 16px;
        font-weight: 700;
        color: rgba( 255, 255, 255, 0.95 );
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }

    .purchase-confirm-copy {
        font-size: 13px;
        color: rgba( 255, 255, 255, 0.85 );
        line-height: 1.4;
    }

    .purchase-confirm-balance {
        font-size: 12px;
        color: rgba( 255, 255, 255, 0.55 );
        margin-bottom: 8px;
    }

    .purchase-confirm-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 4px;
    }

    .purchase-confirm-actions UIButton .ui-button.purchase-confirm-btn {
        min-width: 90px;
        align-items: center;
        justify-content: center;
        padding: 6px 14px;
        border-radius: 5px;
        border: 1px solid rgba( 255, 255, 255, 0.14 );
        background-color: rgba( 0, 0, 0, 0.5 );
        margin: 0;
    }

    .purchase-confirm-actions UIButton .ui-button.purchase-confirm-btn:hover:not( .disabled ) {
        background-color: rgba( $grey, 0.22 );
    }

    .purchase-confirm-actions UIButton .ui-button.purchase-confirm-btn.purchase-confirm-buy {
        background-color: rgba( $innocent-green, 0.25 );
        border-color: rgba( $innocent-green, 0.55 );
    }

    .purchase-confirm-actions UIButton .ui-button.purchase-confirm-btn.purchase-confirm-buy:hover:not( .disabled ) {
        background-color: rgba( $innocent-green, 0.4 );
    }
}